从开始工作到现在，大大小小做了不少项目，经验也算是积累了一点，期间也遇到了不少的坑，所以最近想自己搭建一个博客，把自己遇到的坑和总结的经验记录在上面，并将自己以前在博客园，简书等写的文章迁移过来，也希望可以帮到更多的小伙伴。
在本地搭建hexo博客
环境搭建
首先我们需要安装node，npm，git，安装方法这里就不在说了，自行百度就好。然后我们需要一个github账号，大家可以用邮箱去注册一个，很简单的。
安装hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
hexo的安装可以参考官网 hexo
如果您的电脑已经安装了node和npm,请打开终端，使用npm全局安装hexo-cli
$ npm install -g hexo-cli
进入电脑D盘或者mac电脑的documents或者随便什么地方，新建一个文件夹hexoBlog，并初始化Hexo
$ mkdir hexoBlog
$ cd hexoBlog
$ hexo init
$ npm install
安装完之后，文件目录应该如下：
.
├── _config.yml //根网站配置文件，可以在此修改关于网站的大部分配置
├── package.json //应用程序的信息
├── scaffolds //模版文件夹
├── source //资源文件夹,存放用户资源的地方
| ├── _drafts
| └── _posts //博客的文章，默认有hello-world.md
└── themes //主题文件夹，用于存放主题
| ├── landscape //博客默认主题
这样，一个最基础的博客已经安装完成。
运行博客
接下来我们要让博客在浏览器上运行起来。
$ hexo generate
这条命令可以简写成$ hexo g,目的是生成静态文件，将.md转化为html文件，可选参数为
选项|描述
--|:--:|--:
-d, --deploy| 文件生成后立即部署网站
-w, --watch | 监视文件变动
然后启动一个服务器，默认地址为http://localhost:4000/
$ hexo server
可简写为$ hexo s
然后在浏览器打开http://localhost:4000/ ，就可以看到自己的博客了
使用next主题
如果想美化自己的博客的话，可以选用一些主题，当然你也可以自己开发一个独一无二的博客主题。这里我们采用next主题。next地址
在这个github仓库中我们可以预览下同样使用这个主题的别人的博客样式。
下载next
克隆该主题到博客的themes文件夹下
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
这时的文件目录结构应该为：
.
├── _config.yml //根网站配置文件，可以在此修改关于网站的大部分配置
├── package.json //应用程序的信息
├── scaffolds //模版文件夹
├── source //资源文件夹,存放用户资源的地方
| ├── _drafts
| └── _posts //博客的文章，默认有hello-world.md
└── themes //主题文件夹，用于存放主题
| ├── landscape //博客默认主题
| └── next //next主题
| ├── ... //其它文件
| └── _config.yml //主题配置文件，可以在此修改关于网站的大部分配
使用next主题
打开网站根目录下面的_config.yml 文件，注意区分主题目录下的_config.yml 文件，搜索theme: landscape,找到这一行，并且将landscape改成next,然后就可以了。
选择next主题的样式
next主题有四种样式可供选择，分别是Muse scheme， Mist scheme，Pisces scheme，Gemini scheme，其具体样式可以在github上找到相应链接去预览下，并选择自己喜欢的。
打开themes/next文件夹下面的_config.yml 文件，注意这里不是根目录下面的，找到scheme: Muse一行，可以通过将Muse改为Mist，Pisces，Gemini来使用不同的样式，注意冒号后面的空格一定要有。
启动博客
在Bash依次输入以下命令
$ hexo clean //删除本地已经生成的所有静态文件
$ hexo g //生成静态文件
$ hexo s //启动服务器后
然后在浏览器打开http://localhost:4000/ ，就可以看到博客已经穿上新衣服啦
部署到GitHub
建立GitHub仓库
这里使用的是github提供的Gitpage功能
新建一个名字为<你的用户名>.github.io的仓库,注意用户名一定要是自己的用户名，比如我的就是fengkang92.github.io哈哈。然后打开Settings ->GitHub Pages -->
部署
以下方法均需要你已经安装git，并且在本地和github之间配置了公钥。
首先安装hexo-deployer-git
$ npm install hexo-deployer-git --save
然后打开根目录下的_config.yml文件，找到deploy项，并修改为
deploy:
type: git
repo:
github: git@github.com:<你的用户名>/<你的用户名>.github.io.git
branch: [branch] #published
message: [message]
选项|描述
--|:--:|--:
repo| 库（Repository）地址
branch| 分支名称，默认master
message|自定义提交信息
执行如下命令：
hexo clean && hexo deploy
前者清除站点文件，后者重新生成站点文件并将之推送到指定的库，稍等片刻，打开https://<你的用户名>.github.io/
PS：由于刚刚搭建好博客，还没有加入七牛CDN等，所以这篇文章就没有图片了，等我把博客常用的东西都弄好，后续再补充图片啥的吧，哈哈。
网友评论