准备环境
准备 node 和 git 环境。实验楼里已经安装好了 node 和 git 环境，可以执行以下命令 验证是否成功。
git version
node -v
npm -v
image.png
如果想在本地进行实验，可以在node官网和git官网进行下载安装。
安装 Hexo
如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。在命令行输入执行以下命令：
npm install -g hexo-cli
安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
hexo init blog
cd blog
npm install
新建完成后，指定文件夹的目录如下：
.
├── scaffolds # 模版文件夹
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。
├── package.json
├── source # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
| ├── _drafts # 草稿文件
| └── _posts # 文章Markdowm文件
└── themes # 主题文件夹
运行以下命令，打开右侧的 Web 服务预览效果：
hexo generate #生成文件
hexo server -p 8080 #本地server部署
image.png
注意：Hexo 官网所给的本地 server 部署命令是 hexo server ，但是实验楼的默认端口号是 8080，所以执行 hexo server -p 8080 命令，如果大家本地做实验，执行 hexo server 即可。
常用命令及简写：
hexo generate ---> hexo g # 生成页面文件
hexo server ---> hexo s # 启动服务预览
hexo server -p 8080 # 指定端口运行
hexo deploy ---> hexo d # 部署
hexo clean # 清除缓存，若是网页正常情况下可以忽略这条命令
注册 Github
如果 Github 账号请先在Github官网进行注册。注册完毕后，我们新建一个仓库：
image.png
注意：Github 仅能使用一个同名仓库的代码托管一个静态站点。
新建仓库的时候勾选下方的 Initialize this repository with a README ，创建一个 README.md 文件。
image.png
注意： 仓库名必须是 <username>.github.io ，如果你的 github 名是 David，那么你的仓库名必须是 David.github.io 。
配置 SSH key
要使用 git 工具首先要配置一下 SSH key，为部署本地博客到 Github 做准备。为什么要配置这个呢？因为你提交代码肯定要拥有你的 Github 权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用 ssh key 来解决本地和服务器的连接问题。
生成密钥：
ssh-keygen -t rsa -C "邮件地址"
然后连续回车，最终会生成一个文件在用户目录下。
image.png
执行以下命令查看密钥：
cat ~/.ssh/id_rsa.pub
image.png
然后在 Github 添加刚刚生成的 SSH key，按以下步骤添加：
image.png
创建一个新的 SSH key，点击 New SSH key ，标题可以自定义，key 就填刚才生成的那一长串，确认创建后，在你的 SSH keys 列表里就会看到你刚刚添加的密钥。
image.png
执行命令 ssh -T git@github.com，确认并添加主机到本机 SSH 可信列表，执行命令后，需要输入 yes，若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access 内容，则证明添加成功。
image.png
部署到 Github
部署之前需要修改配置和安装部署插件。
首先打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置：
deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径
branch: master
image.png
image.png
然后安装一个部署插件：
cd /home/project/blog # 切换到项目文件夹下
npm install hexo-deployer-git --save
准备好以上的操作后，我们将远程的仓库同步到本地：
git clone [你的仓库的 url]
image.png
输入命令 ls ，然后发现在 /home/project/blog/ 目录下多了你的仓库文件夹。
image.png
其实之后所谓的部署要做的事就是把 public 文件目录下的博客文件都复制到你的本地仓库中，并将本地仓库 push 到 github 仓库上。这样当其他人访问你的博客链接的时候 github 将会自动将该仓库中的相应文件展示出来。
该过程代码如下：
cd /home/project/blog
cp -R public/* [你的仓库名] # 注意仓库名和 * 之间有一个空格
cd [你的仓库名]
git add .
git commit -m 'update blog'
这个时候会弹出以下提示：
image.png
执行以下命令：
git config --global user.email "你的github邮箱"
git config --global user.name "你的github名字"
git commit -m 'update blog'
image.png
最后执行以下命令就可以部署上传了，以下 g 是 generate 缩写，d 是 deploy 缩写：
git push
hexo g -d
如果出现如下画面，输入你的 github 用户名和密码即可，输入密码的时候是看不见输入的，输入完成直接回车。
image.png
稍等一会，在浏览器访问网址：https://你的用户名.github.io 就会看到你的博客了。有时候执行
hexo -d 会有延迟，需要等一会儿。
image.png
开始写作
博客搭好了，现在我们开始写文章，实验中只会对此简单介绍，详细的文档可以看 hexo 官网。
新建文章，输入以下命令：
hexo new '文章标题名'
image.png
执行完成后可以在 /source/_posts 下看到一个 “hexo 学习日记.md” 的文章文件。.md 就是 Markdown 格式的文件，具体使用可以在网上查找一下，这里只会简单介绍。
image.png
打开文章输入以下内容：
# 这是一级标题
这一段是正文内容
## 这是二级标题
这是一段正文内容
### 这是三级标题
这是一段正文内容
部署到 github，执行以下命令：
hexo g -d
注意：每一次想部署到 github，都需要执行这条命令，后面不再进行提示。
这个时候在 github 的如下目录中，就会有我们新建的文章文件了。
image.png
然后打开博客，就能看到我们新建的文章内容。
image.png
主题设置
网上有很多好看简洁的 Hexo 主题可以更换，下面将以 Next 这款我喜欢的主题为例子，进行更换。
首先你需要找到你喜欢的主题下载地址，这里介绍一下next 主题。点击Clone or download 后将链接复制下来，输入以下命令：
git clone https://github.com/iissnan/hexo-theme-next themes/next
找到 Hexo 文件的位置，进入 themes 文件夹内，这个文件夹就是用来放 hexo 主题的位置的。下载完成后，你就可以看到 themes 文件夹下出现了一个新的名为 next 文件夹，这个就是我们刚刚下载的主题。
打开 _config.yml 这个文件，找打 theme 属性，更改属性值：
theme: next
并且修改一下作者，网页标题等信息。
image.png
执行如下命令，先在环境进行测试，如果运行成功，执行命令到博客上。
hexo g
hexo s -p 8080
image.png
这样 next 主题设置就成功了。
主题风格设置
Next 提供了四种主题，可以在主题配置文件 blog/themes/next/_config.yml 文件中进行选择，分别是 Muse、Mist、Pisces、Gemini：
image.png
image.png
Next 主题默认只有两个菜单，如果要增加菜单，在themes/next/_config.yml中修改配置：
image.png
image.png
七牛实现图床
进入七牛官网，按流程注册个人账户。
image.png
进入个人面板，添加“对象存储”，填写信息之后，创建。
image.png
进入文件管理，点击上传文件，上传成功后，鼠标移动到详情，点击“复制外链”即可。
image.png
个性化主题
添加头像图片
在七牛上上传图片，复制外链，在themes/next/_config.yml中修改配置：
image.png
image.png
添加社交账号
在themes/next/_config.yml中修改配置：
image.png
image.png
添加背景动画
在themes/next/_config.yml中修改配置，这里选了canvas_next，有四种效果，根据自己的喜好选择。
image.png
image.png
添加评论功能
使用 LeanCloud 作为服务后台，先注册一个 LeanCloud 账号： Leancloud 官网。创建一个应用，名字自定义，在应用中的存储中创建一个 Class，名字叫做Counter，权限设置为无限制：
image.png
image.png
在 LeanCloud 的设置 -> 应用 Key 可以找到 AppID 和 AppKey。
image.png
在themes/next/_config.yml中修改配置，搜索 valine，开启 valine，设置 enable 为 true，填上 id 和 key。
image.png
刷新，效果如图：
image.png
最后按照上面学习的步骤，部署到自己的博客上就可以了。
网友评论