博客：用 Hexo搭建博客

总流程

• 安装Git Bash / iterm或其他命令行工具
• 安装NodeJs
• 安装git
• 安装hexo并发布一篇博客
• 生成SSH并添加进github
• 部署项目到github
• 修改及配置主题

Hexo

Hexo是一款基于Node.js的静态博客框架。通过它可以把本地的文件生成为本地网页。如果需要放在网上的话，就可以通过 Github Pages 来搭建

使用 Hexo 之前，需要先安装 Node.js 和 Git。

操作如下：

1. 安装 Node.js

   • 不在此赘述啦
   • 输入 `node -v，查看版本号

2. 安装 Git

   • 不在此赘述啦
   • 输入 git --version, 查看版本号
     额外说明：如果 Git –version 指令不管用，可能需要到 Environment Variable 那里添加 Path。

3. 安装 Hexo

   • 打开iterm
   • 输入 npm install -g hexo-cli
   • 回车开始安装（可能提示没有权限，sudo解决；如果sudo询问who are you通过chmod解决）
   • 输入 hexo -v

   • 得到 hexo-cli: 1.0.4 等一串数据
     安装成功

     
     
     

     image.png
     
     

     简单介绍一下

   • _config.yml：博客的配置
   • db.json：source解析所得到的
   • node_modules：依赖包
   • package.json：项目所需模块项目的配置信息
   • public：存放的是生成的页面
   • scaffolds：命令生成文章等的模板
   • source：命令创建的各种文章
   • themes：主题

4. 创建本地博客

   • 在某个目录下创建文件夹 blog

   • cd 进入该文件夹

   • 输入 hexo init 将 blog 文件夹初始化成一个博客文件夹。

   • 输入 npm install 安装依赖包（可选cnpm通过淘宝镜像下载）。

   • 输入 hexo g 生成（generate）网页。 默认展示Hexo 里面自带了一个 Hello World 的博客页面。

   • 输入 hexo s 将生成的网页放在了本地服务器（server）。通过提示访问对应url（ http://localhost:4000/）即可观看效果
     

     

     image.png

   • 按 Ctrl+C 结束。

     此时 http://localhost:4000/ 就是无法访问了。

5. 发布一篇博客

   • cd进入blog文件夹里，在iterm（命令提示符）中输入 hexo new "My First Post" 创建一个名为“My First Post”的文件；
   • 在 \blog\source_posts 路径下，会有一个 My-First-Post.md 的文件。 编辑这个文件，然后保存。
   • 回到iterm，输入 hexo g
   • 输入 hexo s
   • 前往 http://localhost:4000/ 查看成果。
   • 回到iterm，按 Ctrl+C 结束。

Github Pages

Github Pages 其实本身就是 Github 提供的博客服务。 我们在 Github 中创建一个特定格式的 Repository，Github Pages 就会将里面的信息生成一个网页，展示出来。

操作如下：

1. 注册 Github 账号，然后在 Github 中创建一个以 .github.io 结尾的 Repository。
   1. Repository name: znlu.github.io
   2. 勾选 Initialize this repository with a README
   3. Create repository
2. 简单地编辑一下 README.md 这个文档并保存(Commit changes)。
3. 打开网页：znlu.github.io 这里就可以看到 README.md 里的内容了。

注意：创建一个Repository的时候，名称为yourname.github.io, 其中yourname必须是你的github名称，按照这个规则才能构建成功

image.png

生成SSH并添加到github

• 回到iterm中配置你的github账户信息包括姓名和邮箱
  git config --golabal user.name "XXXXX"
git config --golabal user.email "XXXXX"

• 输入ssh-keygen -t rsa -C "[email protected]”生成ssh然后
  通过cd ~/.ssh cat id_rsa.pub来获取，并在github上进行配置；
  

  

  image.png

image.png

新建并在详情里粘贴进去

将本地 Hexo 博客部署在 Github 上

前面两个部分，我们已经有了本地博客，和一个能托管这些资料的线上仓库。只要把本地博客部署（deploy）在我们的 Github 对应的 Repository 就可以了。

操作如下：

获取 Github 对应的 Repository 的链接。

登陆 Github，进入到 znlu.github.io
点击 Clone or download
复制 URL 待用

我的是 https://github.com/ZnLu/znlu.github.io.git

修改博客的配置文件

打开配置文件/blog/_config.yml，滚到最下面

image.png

找到 #Deployment，填入以下内容：
deploy:
type: git
repository: https://github.com/ZnLu/znlu.github.io.git
branch: master
输入 npm install hexo-deployer-git --save 安装 hexo-deployer-git 此步骤只需要做一次。
输入 hexo d
得到 INFO Deploy done: git 即为部署成功

image.png

之前我们创建的 ReadMe.md 会被自动覆盖掉。

查看成果

前往 https://znlu.github.io/ 即可。

使用其他主题

更多 Hexo 的主题看这里

这里以 Next 为例。 大概思路就是把整个主题的文件克隆到我们的主题文件夹中。在配置文件中注明使用该主题。

操作如下：

1. 还是回到 iterm。 输入 git clone https://github.com/iissnan/hexo-theme-next themes/next

   这样，该主题的文件就全部克隆到 \blog\themes\next 下面。

2. 修改博客配置文件

   • 打开 \blog_config.yml
   • 找到 theme:
   • 把 Hexo 默认的 lanscape 修改成 next。 即 theme: next
   • 找到 # Site，添加博客名称，作者名字等。
   • 在 language 后面填入 en 或者 zh-Hans，选择英文或者中文。
   • 找到 # URL, 填入 url。比如 url: https://znlu.github.io

3. 重新生成部署即可

   • 回到 Git Bash。输入 hexo g -d就可以了。

     先把修改的内容生成网页，再部署。

4. 查看成果

   前往 znlu.github.io 即可。

附：hexo指令 https://hexo.io/zh-cn/docs/commands.html