Jiarui's Blog.

How do I build my own blog with Hexo and Github

Hexo Github blog Mac
2018/04/11 Share

昨晚熬夜终于搭好了一个属于自己的博客，但是对markdown语法还不是很熟悉，于是决定写一篇搭博客的教程来熟悉一下。前人掉坑，后人绕行。那么，废话不多说，就开始吧！:)

本文主要是针对 Mac OS 系统上基于 Github 和 Hexo 的博客搭建，Windows 系统上的搭建过程类似，但是会略有不同，可以作为参考。

Github 和 SSH 设置

博客搭建的大概思路就是用 Github 获得免费的域名和空间，然后使用搭建博客的模版 Hexo 来让博客更好看。

注册 Github

首先去 Github 上注册你的username，建议使用常用邮箱，Github上很多通知都是通过邮箱的。比如你的主页上传并构建成功会通过邮箱通知，更重要的是，如果构建失败的话也会在邮件中说明原因。

本地SSH Keys的设置

我们需要通过SSH来让本地编辑的内容托管到Github，所以要对先SSH进行设置。

首先检查电脑上现有的SSH Keys，在Terminal输入

1
$ cd ~/.ssh

输入 ls 查看是否有ssh keys。

1
$ ls

如果只显示一个 known_hosts ，说明没有ssh keys，可以跳过这一步，否则需要备份和移除原来的SSH Keys (因为我之前没有SSH Keys，所以我没有用到这一步)

1
2
3
4
$ config  id_rsa  id_rsa.pub  known_hosts
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

输入以下代码形成新的SSH Key文件，我们只需要默认设置就好，所以当需要输入文件名的时候，回车就好。

1
2
3
4
5
$ ssh-keygen -t rsa -C “your-email”

显示：
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

上面代码中的 “your-email” 就是你在学习Git时，你自己设置的Git用户名时给出的email地址 ( 我的话，使用的是注册github的email )。

然后系统会要你输入加密串（Passphrase）：

1
2
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

最后看到SSH Key success，就成功设置SSH Key了。

添加SSH Key到GitHub

在本机设置SSH Key之后，需要添加到 GitHub 上，以完成SSH链接的设置。输入下面代码打开SSH文件夹

1
$ open ~/.ssh

用文本编辑工具打开 id_rsa.pub 文件。

登录Github，点击右侧自己的头像，选择 “setting” 。

Gihub Setting

选择右侧的 “SSH and GPG Keys” 项，把 id_rsa.pub 文件中的内容复制到如下位置，然后点击 Add Key 按钮即可。

SSH Key

PS：如果需要配置多个GitHub账号，可以参看这个 多个github帐号的SSH key切换，不过需要提醒一下的是，如果你只是通过这篇文章中所述配置了Host，那么你多个账号下面的提交用户会是一个人，所以需要通过命令git config –global –unset user.email删除用户账户设置，在每一个repo下面使用git config –local user.email ‘你的github邮箱@mail.com’命令单独设置用户账户信息。 （原po写的这个没看懂QAQ，反正暂时用不到，呼～）

可以输入下面的命令，看看设置是否成功，`git@github.com` 的部分不要修改：

1
$ ssh -T git@github.com

如果是下面的反应：

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张，输入yes就好，然后会看到：

1
Hi <em>username</em>! You've successfully authenticated, but GitHub does not provide shell access.

设置你的账号信息

现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。

Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字必须是你的真名，而不是GitHub的昵称。

1
2
$ git config --global user.name "你的名字"
$ git config --global user.email "your_email@youremail.com"

好了，你已经可以成功连接GitHub了。

基于Hexo搭建博客

创建项目仓库

点击Github页面右上角的“+”的符号，选择 “New repository” ,然后在 “Repository name” 输入框里面填写 username.github.io，这里 “username” 是 Github 账号名。例如，下图中就是 suncrazy.github.io。

Repo Name

然后其他的地方都是默认即可，点击 “Create repository” 即可创建成功。到目前为止，github部分的内容就完成了。

安装 Git

接下来需要配置和使用Github，需要用到Git。Mac OS X 中自带Git，不需要安装，在Terminal中输入以下命令可以查看Git版本号。

1
$ git --version

安装 Nodes.js

从 Nodes官网 下载并安装 Nodes.js。
Node.js 安装完成以后，npm 也被安装完成，简化了工作。检测安装是否成功，可以在 Mac Terminal 中输入以下命令查看 Node.js 和 npm 的版本号：

1
2
$ node -v
$ npm -v

安装 Hexo

Git、Node.js 和 npm 安装完成以后，接下来就可以安装 Hexo 了。在 Mac Terminal 中输入以下命令即可执行安装（可能需要输入电脑密码）：

1
$ sudo npm install hexo -g

安装完成后，输入以下命令查看Hexo版本号：

1
$ hexo -v

初始化 Hexo 和 Git

在根目录下，用以下语句新建一个文件夹，例如“blogGithub”，这个文件夹将是你的博客的根目录，以后与博客有关的所有文件都是存放在这里。

1
2
$ cd
$ mkdir blogGithub

进入你新建的这个文件夹，执行Hexo初始化以及Git初始化

1
2
3
$ cd blogGithub
$ hexo init
$ git init

这个时候，你会发现在 “～/blogGithub” 中多了很多文件夹。

安装依赖

在部署博客之前，需要先安装依赖，执行以下命令即可（可能需要输入电脑密码）：

1
$ sudo npm install

生成静态页面

执行以下命令，生成静态页面：

1
$ hexo generate

启动服务

执行以下命令，启动服务：

1
$ hexo server

Terminal 界面如图所示。

Hexo Server

打开浏览器，输入 http://localhost:4000/ ，如下图所示。

Hexo Page

这就是你的博客的界面，其中显示的内容是默认的内容，你可以随意修改。

回到Terminal界面，使用 Ctrl+C 停止服务。

博客上传

将博客内容上传到Github，需要安装Git部署器，执行以下命令安装：

1
$ npm install hexo-deployer-git --save

安装完成之后，利用文本编辑器打开 hexo 目录 (这里是 “～/blogGithub” ) 中的 “_config.yml” 文件，在文件最末尾，修改如下配置：

Config

其中，”username” 是Github账户名。

在 Hexo 目录 (这里是 “～/blogGithub” ) 下执行以下命令， 即可完成对将静态博客部署到 GitHub 上。

1
$ hexo deploy

部署成功以后，在浏览器中输入 http://username.github.io 即可在线浏览自己的博客啦~

创建新博客

以下命令均在 Hexo 目录 (这里是 “～/blogGithub” ) 下执行。

创建博客

新建博客，执行以下命令:

1
hexo new "text_blog"

在 /hexo/source/_posts/ 目录下即可看到一个名为 test-blog.md 文件，打开写入自己的博客内容。

编写博客

Mac 下可以考虑下载和安装 MacDown 进行博客编写。博客编写使用 Markdown 进行编写，在 MacDown 中，自带 help 文件，怎么写说得很详细，也可以参考 MacDown的使用规范总结 。

在 Hexo 中，空格很重要，比如一级标题显示需要写成 # 一级标题 ，写成 #一级标题 就无法显示成一级标题。另外，为了方便插入图片，需要在 Hexo 目录下的 “_config.yml” 配置文件中，找到这个配置：

1
post_asset_folder: false

把这里的false改为true，开启hexo的媒体文件支持。

在命令行中，跳转到hexo目录下，使用以下语句安装图片插件：

1
$ sudo npm install hexo-asset-image --save

插件会安装到 “node_moudules” 目录下，名为 “hexo-asset-image”。以上执行完毕后，在命令行执行：hexo new “文件”时，会在_post文件夹下同时生成md文件和同名文件夹，这个同名文件夹就是用来放图片的，把你在该文章中需要显示的图片放进去，然后在markdown中选择该目录下的图片使用，这样当md编译生成html文件时，会把图片拷贝到html文件同目录中。最后执行hexo d -g 部署到服务器时，图片也就被部署到服务器中了。

注意：如果直接把图片拖动到markdown编辑器中，其路径可能为绝对路径，需要改下：

absolute

修改为相对路径：

relate

发布新博客

编辑好博客以后，即可执行以下命令部署到Github上：

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

Hexo常用命令

了解Hexo命令可以看 这里，这里列出一些常用命令：

1
2
3
4
5
6
7
$ hexo init       //在指定目录执行该命令，会将当前目录初始化为hexo站点，生成hexo站点所需的一切文件
$ hexo new “my new blog title”   //新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
$ hexo clean      // 清除缓存，如果对本地文件做了修改，同步到远程验证修改的效果之前，先clean，清除缓存
$ hexo generate   // 可以简写成hexo g 根据markdown文件生成静态文件
$ hexo server     // 或者简写成hexo s 启动本地hexo 服务器，默认localhost:4000可以访问
$ hexo deploy     // 或者简写成hexo d 将本地修改，部署到远端
$ hexo version    // 显示hexo版本

一些快捷键：

1
2
3
4
$ hexo g == hexo generate
$ hexo d == hexo deploy
$ hexo s == hexo server
$ hexo n == hexo new

配置博客主题

上面的内容是搭建起了一个正常的博客，但是如果我们想要一个更加好看的博客界面的话，我们必须得使用别的主题。进入 Hexo官网 可以选择很多主题，我选择的是 hexo-theme-archer 。原po做得特别好，而且遇到问题问他，回复速度也巨快～。在按照原po在Github上写的说明就可以修改完配置文件后，运行下列语句即可部署到 Github 上。

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

参考文献

此处感谢一下各位写详细教程的大大们，毕竟小白我才体会到，写一篇教程要花很多时间和精力。另外特别感谢下博客主题的作者 fi3ework 贡献的主题，作者 Github ， 博客主题 hexo-theme-archer 。

[1] github+hexo+jacman搭建个人博客

[2] 利用github-pages建立个人博客

[3] Mac 下 Hexo 和 GitHub-Pages 搭建个人博客（一）

[4] Mac搭建Hexo博客及NexT主题配置优化

[5] hexo本地图片发布后不能显示的问题

CATALOG
  1. 1. Github 和 SSH 设置
    1. 1.1. 注册 Github
    2. 1.2. 本地SSH Keys的设置
    3. 1.3. 添加SSH Key到GitHub
    4. 1.4. 设置你的账号信息
  2. 2. 基于Hexo搭建博客
    1. 2.1. 创建项目仓库
    2. 2.2. 安装 Git
    3. 2.3. 安装 Nodes.js
    4. 2.4. 安装 Hexo
    5. 2.5. 初始化 Hexo 和 Git
    6. 2.6. 安装依赖
    7. 2.7. 生成静态页面
    8. 2.8. 启动服务
    9. 2.9. 博客上传
  3. 3. 创建新博客
    1. 3.1. 创建博客
    2. 3.2. 编写博客
    3. 3.3. 发布新博客
  4. 4. Hexo常用命令
  5. 5. 配置博客主题
  6. 6. 参考文献
Total : 13
2018
Cityscapes Dataset Deeplab v3+ train Docker Hexo Github blog Mac Linux Command Mapillary Vistas Shell Tensorflow Python Git