本文实践的操作系统是windows 10，其他OS的可以当做参考用
一、Hexo搭建博客
1. 环境准备
直接上官网看指引即可，如有疑问可以在评论中留言说明
2. Hexo初始化博客
在命令行窗口中执行下列命令
- 使用npm安装hexo
npm install -g hexo-cli
- 初始化你的博客项目
执行命令
hexo init <folder>
cd <folder>
npm install
<folder>是你本地的文件目录，例如：F:\bruce\hexo\bugmakerBlog，如果不写，则会在执行命令的当前目录初始化一个hexo博客项目
初始化的过程中会去github上下载一些东西，比如说默认的主题
landscape之类的，需要等个几分钟
执行 hexo init 效果图
执行 npm install 效果图
初始化完成后，你会得到一个这样的项目目录结构：
初始项目目录结构 - 可以在idea中打开
_config.yml
网站的主要配置文件，可以配置你网站的大部分信息。【配置参考说明】
简单的配置示例
| key | 说明 | 示例 |
|---|---|---|
| title | 网站的名字 | BuG制造者联盟官方主页 |
| author | 网站的作者 | Bruce |
| language | 语言设置 | zh-CN |
package.json
应用数据。
scaffolds目录
模板目录，你新建一篇博客的时候会以这个目录中的模板文件来创建。
source目录
资源目录，你新建的博客都存储在这里。在生成页面的时候，hexo会忽略掉命名为 _ 开头的文件或文件夹， _post 除外，会将 .md 和 .html 后缀的文件按主题生成页面，并复制到public目录下，其他后缀的文件则直接复制过去，不进行额外转换操作。
themes目录
主题目录，你可以为自己的网站挑选好看的主题，然后在 _config.yml 文件中指定主题即可。
- 写一篇博客
hexo new [layout] <title>
hexo new会在source目录中创建一个以<title>命名的.md文件
[layout]是默认布局，在scaffolds目录下定义的，默认布局在_config.yml中指定，初始化的默认布局是post
<title>是博客的标题，博客的标题可以在生成的.md文件中修改
示例
hexo new post My First Blog
新写一篇博客的效果图
- 生成页面并运行你的博客
hexo g
hexo s -p 80
hexo g是hexo生成页面指令hexo generate的缩写
hexo s是hexo启动本地服务的指令，默认端口是4000
-p 80是指定端口号80
生成并启动hexo本地服务效果图.png
默认访问地址 http://localhost:4000
指定80端口访问地址 http://localhost
初始化的博客页面
3. 切换博客主题
在上一步中，我们看到的博客使用的主题是默认的 landscape 主题，hexo为我们提供了很多的主题可以选择，访问网站 https://hexo.io/themes/ 挑选自己喜欢的主题
将挑选好的主题 clone 到 theme目录 下，主题目录下也有一个 _config.yml 配置文件，这个配置文件即主题相关配置，具体根据主题的wiki上的说明来操作
在 _config.yml 中，设置 theme 属性的值为 theme目录 下的某一款主题即可，直接写目录下的文件夹名字
示例：
- clone主题到
theme目录
git clone https://github.com/klugjo/hexo-theme-alpha-dust.git
- 修改根目录下的
_config.yml配置文件，设置theme值
theme : hexo-theme-alpha-dust
- 重新生成并启动本地服务
hexo g
hexo s -p 80
-
效果图
切换主题测试的效果图.png
二、了解Github Pages服务
GitHub Pages 网站：https://pages.github.com/
1. 有什么用
Websites for you and your projects. 为你和你的项目提供一个网站
Hosted directly from your GitHub repository. 直接托管存储在你的github仓库
Just edit, push, and your changes are live. 只管去编辑提交代码到仓库，你的网站都会即时更新。
2. 怎么玩的
步骤其实很简单，在 Github Pages上都有
如果你还没有github的账号，那需要先注册一个
-
第一步：在github上创建一个仓库，命名为
username.github.iousername就是你的github用户名，注意不是登录账号，我仓库名字是BuGMakerClub.github.io -
第二步：将刚刚创建的仓库
clone到本地，如F:\bruce\bruce-private-github\BuGMakerClub.github.io
cd F:\bruce\bruce-private-github\
git clone https://github.com/BuGMakerClub/BuGMakerClub.github.io.git
- 第三步：在
clone下来的项目中，创建一个index.html，内容可以是Hello World
cd BuGMakerClub.github.io
echo 'Hello World' > index.html
-
第四步：提交代码，把刚创建的
index.html文件commit & push到你的 github仓库中 -
第五步：结束，你可以直接访问
https://username.github.io访问你的网站了，我的网站地址是 https://BuGMakerClub.github.io
bugmakerclub.github.io.png
-
第六步：设置自己的个性化域名
如果你有自己的域名，可以在仓库的设置中绑定自己的个性化域名，然后在域名管理中心设置一个域名解析地址，这样就可以用个性化域名来访问github pages服务商的网页了
三、结合Hexo博客和Github Pages服务
hexo的配置中，有一个 deploy 指令，可以将生成的博客网站部署到github仓库中，这样就形成两者的结合关系了。
具体操作如下
- 安装
hexo-deployer-git插件
npm install hexo-deployer-git --save
安装hexo-deployer-git插件效果图.png
- 修改根目录下的
_config.yml配置文件
deploy:
type: git
repo: https://github.com/BuGMakerClub/BuGMakerClub.github.io.git
- 执行
deploy指令发布代码
hexo d
网友评论