Hexo搭建静态博客
1. 环境
1.1 安装Git
1.2 安装node.js
1. 安装nvm
使用crul方式安装:
$curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash
$echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc
2. 使用nvm安装node.js
$nvm install node
$nvm alias default node
2. 配置Github
2.1 建立Respository
建立与你用户名对应的仓库,仓库名必须为【your_user_name.github.io】
2.2 配置SSH-Key
3. 安装Hexo
3.1 Installation
打开Git命令,执行如下命令
$ cnpm install -g hexo
3.2 Quick Start
1. Setup your blog
在电脑中建立一个名字叫「Hexo」的文件夹(比如我建在了D:\Hexo),然后在此文件夹中右键打开Git Bash。执行下面的命令
$ hexo init
[info] Copying data
[info] You are almost done! Don't forget to run
cnpm install
before you start blogging with Hexo!
Hexo随后会自动在目标文件夹建立网站所需要的文件。然后按照提示,运行 cnpm install(在 /D/Hexo下)
cnpm install
会在D:\Hexo目录中安装 node_modules。
2. Start the server
运行下面的命令(在 /D/Hexo下)
$ hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
表明Hexo Server已经启动了,在浏览器中打开 http://localhost:4000/,这时可以看到Hexo已为你生成了一篇blog。
你可以按Ctrl+C 停止Server。
3. Create a new post
新打开一个git bash命令行窗口,cd到/D/Hexo下,执行下面的命令
$ hexo new "My New Post"
[info] File created at d:\Hexo\source_posts\My-New-Post.md
刷新http://localhost:4000/,可以发现已生成了一篇新文章 "My New Post"。
NOTE:
有一个问题,发现 "My New Post" 被发了2遍,在Hexo server所在的git bash窗口也能看到create了2次。
$ hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
[create] d:\Hexo\source_posts\My-New-Post.md
[create] d:\Hexo\source_posts\My-New-Post.md
经验证,在hexo new "My New Post" 时,如果按Ctrl+C将hexo server停掉,就不会出现发2次的问题了。
所以,在hexo new文章时,需要stop server。
4. Generate static files
执行下面的命令,将markdown文件生成静态网页。
$ hexo generate
该命令执行完后,会在 D:\Hexo\public\ 目录下生成一系列html,css等文件。
5. 编辑文章
hexo new "My New Post"会在D:\Hexo\source_posts目录下生成一个markdown文件:My-New-Post.md
可以使用一个支持markdown语法的编辑器(比如 Sublime Text 2)来编辑该文件。
6. 部署到Github
部署到Github前需要配置_config.yml文件,首先找到下面的内容
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type:
然后将它们修改为
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: [email protected]:zhchnchn/zhchnchn.github.io.git
branch: master
NOTE1:
Repository:必须是SSH形式的url([email protected]:zhchnchn/zhchnchn.github.io.git),而不能是HTTPS形式的url(https://github.com/zhchnchn/zhchnchn.github.io.git),否则会出现错误:
$ hexo deploy
[info] Start deploying: github
[error] https://github.com/zhchnchn/zhchnchn.github.io is not a valid repositor URL!
使用SSH url,如果电脑没有开放SSH 端口,会致部署失败。
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
NOTE2:
如果你是为一个项目制作网站,那么需要把branch设置为gh-pages。
7. 测试
当部署完成后,在浏览器中打开[http://our_user_name.github.io/](https://our_user_name.github.io/) ,正常显示网页,表明部署成功。
8. 总结:部署步骤
每次部署的步骤,可按以下三步来进行。
hexo clean
hexo generate
hexo deploy
9. 总结:本地调试
- 在执行下面的命令后,
$ hexo g #生成
$ hexo s #启动本地服务,进行文章预览调试
浏览器输入http://localhost:4000,查看搭建效果。此后的每次变更_config.yml 文件或者新建文件都可以先用此命令调试,尤其是当你想调试新添加的主题时。
- 可以用简化的一条命令
hexo s -g
3.3 总结
3.3.1 常用命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
3.3.2 复合命令
hexo deploy -g #生成加部署
hexo server -g #生成加预览
命令的简写为:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy