从一个小白开始搭建个人博客，期间参考了不少博客，踩了无数坑才搭起来的，现在总结下，希望能帮助大家少踩点坑。
一、整体流程：
二、具体实现：
1、配置环境
- 1、 Node.js 安装
- 用来生成静态页面。移步Node.js官网，下载左边稳定版的就可以，按照提示安装即可。
- 在终端里面输入
node -v,可以查看node.js版本,以此来验证是否安装成功 - 也可以按照hexo文档上提示用命令行安装Node.js
- 2、 git安装
- Mac电脑自带git,如果没有可以参考上hexo官网的安装方法
- 在终端里面输入
git --version,可以查看git版本，以此来验证是否安装成功
2、安装hexo
<span style="color:red">必须确保Node.js和Git都安装好才可以正式安装Hexo了<span>
Node.js和Git都安装好，在终端执行如下命令：
sudo npm install -g hexo
输入管理员密码（Mac登录密码）即开始安装 (sudo:linux系统管理指令 -g:全局安装)
注意坑一、Hexo官网上的安装命令是$ npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。
- 在终端里面输入
hexo -v,可以查看hexo版本,以此来验证是否安装成功
3、hexo本地配置，实现本地发布、预览
完成hexo的本地配置，即可实现本地的静态博客，实现发布文章、预览文章。
- 初始化
终端cd到一个你选定的目录，执行hexo init命令：
hexo init blog
blog是你建立的本地博客文件夹名称。 - 安装npm
cd到blog文件夹下，执行如下命令，安装npm:(NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题)
npm install - 发布文章
在终端执行如下命令，发布文章：
hexo new "test" #发表文章
test是文章名字，默认是markdown的.md格式，名字尽量不要使用汉字。
test.md会默认生成在blog/source/_post文件夹下。以后发布文章都要在这个_post文件夹下，也可以把文章写好后直接拖到这个文件夹下。 - 生成静态页面
hexo generate 或者 hexo g #生成静态页面，生成的内容在public文件夹下
此时若出现如下报错：
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
则执行命令：
`npm install hexo --save`
若无报错，自行忽略此步骤。
- 开启hexo服务器
hexo s 或者 hexo serve
此时，浏览器中打开网址http://localhost:4000，就能看到博客内容
4、关联Github
- 1、创建仓库
登录你的Github帐号，新建仓库，名为 ”用户名.github.io“ 固定写法，如sunny-xl.github.io 。用户名必须和你的github的用户名username一致，注意这个username是您github主页上地址栏后显示的那个username。 - 2、把本地博客和github新建的仓库地址关联起来
此时，本地blog文件夹下内容为：
_config.yml
node_modules
package.json
public
scaffolds
source
themes
1、修改_config.yml内容，关联github
我是用的Sublime Text,强烈推荐使用,支持很多语言格式
终端cd到blog文件夹下，vim打开_config.yml，命令如下：
vim _config.yml
打开后往下滑到最后，修改成下边的样子：
deploy:
type: git
repository: https://github.com/sunny-xl/sunny-xl.github.io.git
branch: master
message: 'Daily updated：{{now("YYYY-MM-DD HH:mm:ss")}} by sunny'
你需要在repository后填写你刚才建立的仓库地址，可以用https地址，也可以用ssh地址。hexo 3.1.1版本后type:值为git。
注意坑二：在配置所有的_config.yml文件时（包括theme中的），在所有的冒号:后边都要加一个空格，否则执行hexo命令会报错，切记 切记
2、博客部署到github上
在blog文件夹目录下执行生成静态页面命令：
hexo g
再执行部署命令：
hexo deploy 或者：hexo d
注意坑三：若执行命令hexo deploy仍然报错：无法连接git或找不到git，则执行如下命令来安装hexo-deployer-git：
npm install hexo-deployer-git --save
再次执行hexo generate和hexo deploy命令。
若你未关联Github，则执行hexo deploy命令时终端会提示你输入Github的用户名和密码，即
Username for 'https://github.com':
Password for 'https://github.com':
hexo d 命令执行成功后，浏览器中打开网址https://sunny-xl.github.io（将sunny-xl换成你的账户名）能看到和打开http://localhost:4000时一样的页面
至此，搭建基于Github Pages的Hexo博客就完成了。下面的内容是介绍安装theme，如果有兴趣且还有耐心的话，请继续吧。
5、配置hexo的主题
你可以到Hexo官网主题页去搜寻自己喜欢的theme。这里以hexo-theme-next为例
- 下载next主题
终端cd到 blog 目录下执行如下命令：
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 修改配置
将blog目录下_config.yml里theme的名称landscape修改为next即可。
终端cd到blog目录下执行如下命令(每次部署文章的步骤)：
hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g //生成缓存和静态文件
hexo d //重新部署到服务器
至于更改theme内容比如名称、描述、头像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中对应的属性名称即可， 不要忘记冒号:后加空格。 NexT使用文档 里有极详细的介绍。
网友评论