GitHub Page的搭建——hexo版

发表于 | 更新于 | 分类于 ，

什么是GitHub Page？

​ GitHub Page是通过GitHub托管并轻松发布的一个公共网页。

​ 详情见：GitHub页面入门 or GitHub Page

什么是Hexo

​ Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章，在几秒内，即可利用主题生成静态网页。

​ Hexo官网为：https://hexo.io/

当然GitHub Page官方推荐的静态生成器为：Jekyll 杰奇

开始搭建

一、配置GitHub

  1. 注册GitHub账号github.com/ 、登录

  2. 建立GitHub Page的项目：

    • 点击右上角头像旁边的 ’ + ‘ 号，选择 ‘ New repository ‘

  3. Repository name 填写：username.github.io (注:username为你GitHub的账号名)

    例如，域名是github.com/chunrichi就填chunrichi.github.io

二、 安装环境（node、git）

  1. 安装Node.js https://nodejs.org/en/

  2. 安装Git https://github.com/waylau/git-for-win

    • 在 Git Bash 中执行如下代码即可：

      1
      2
      3
      4
      # 提交者名
      git config --global user.name "YOUR NAME"
      # 提交者邮箱：一般和GitHub账号的邮箱一致（因为提交者只有你一人）
      git config --global user.email "YOUR EMAIL ADDRESS"

三、正式安装Hexo：

  1. 安装Hexo

    • 在任意终端（cmd、Git bash等）中敲入如下命令，回车等待安装完成。 

      1
      npm install -g hexo-cli

  2. 初始化：建站

以下内容都是在博客目录下执行的 请先cd到你的目录下

  • 建一个文件夹用来存放博客的本地文件（建议与GitHub仓库名一致） 、在文件夹目录下执行以下命令，创建网站所需要的文件：
1
2
3
4
# 初始化Hexo
hexo init [需要初始化的目录] 
# 安装依赖
npm install
  • 完成后，your_name.github.io 文件夹下面的目录如下：
1
2
3
4
5
6
7
.
├── _config.yml		# 文件存放着网站的配置信息，可以在这里配置大部分的参数
├── package.json	# 文件存放着插件信息，从中可以查看那些插件已经安装。
├── scaffolds		# 是模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件，不过这个模板和后面的主题里指的模板不一样。
├── source		    # 是存放用户资源的地方的文件夹，除 _posts 文件夹之外，开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹（别急，等下会生成的），而其他文件会被拷贝过去。
|   └── _posts		# 文章原始MarkDown存放的目录
└── themes		    # 主题文件夹，Hexo 会根据主题来生成静态页面，我们以后自己安装的主题也都会放在这个文件夹下面，默认的 landscape 主题已经在里面了。
  1. 预览博客内容
1
2
3
4
# 生成静态页面 g = generate (本地预览，此处可不执行)
hexo g
# 启动本地服务 s = server
hexo s

  1. 测试

    然后在浏览器中输入 http://localhost:4000 就可以看到你的博客了。

四、更换主题

在Themes | Hexo 中挑选喜欢的主题。

此处以Next主题为例，编写者Blog：https://notes.iissnan.com/2015/something-about-next/

  1. 安装Next主题

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next

  2. 使用Next主题

    打开本地博客目录下的 _config.yml 文件，搜索，定位 theme 键值，将 theme 的值修改为 next 

    1
    theme: next //刚刚安装的主题名称

    注意！！ Hexo配置文件中所有的配置项冒号与值之间都要有一个空格，否则无效

  3. 配置站点

    在 _config.yml 中，我们可以修改大部分配置，例如：博客标题 - title、博客作者 - author、邮箱 - email等

    详情参考：Hexo 的官方文档 开始使用 — 配置
    在 theme\next\_config.yml 中可以修改主题配置
    详情参考：Next 的说明文件 这里是说明文件！

五、生成文章

  1. 方案一

    在 _posts 文件夹下，新建一个 Markdown 文件，或者把你以前有的 Markdown 文件复制进来，根据 Hexo 的官方文档 基本操作 — Front-matter ，写好你的第一篇文章，比如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    itle: Test for Hexo		# 文章标题
    ate: 2016/12/7 20:46:25	 # 文章日期
    ategories:				# 分类 分类可以多级
    - Diary
    ags:					# 标签 可配置多个标签，注意格式
    - PS3
    - Games
    --						# 正文分隔符 以上内容不会在正文显示

    Hexo Test.				# 正文
    # 在你博客文章中需要居中处加上下面这段代码即可，中间的文字改成你所需要的文字
    <blockquote class="blockquote-center">
    不忘初心，这里可以写多行文字
    </blockquote>

  2. 方案二

    在文档目录下执行以下命令：

    1
    hexo new "Hexo使用"

    预览效果输入：

    1
    2
    3
    hexo g  
    hexo s  
    # 访问localhost:4000预览效果。（退出server用Ctrl+c）

六、部署到GitHub

  1. 继续之前的Git设置， 继续在Git Bash 中进行操作
  2. 生成新的 SSH Key

为了获得提交权限，身份认证 的一个步骤

  • 根据 Github 的官方文档 Generating a new SSH key ， 我们在 Git Bash 下执行如下命令，生成 SSH Key

    1
    2
    # your_email@example.com 是你的 Github 注册邮箱
    ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

  • 生成的 SSH 已经生成后显示：

    1
    2
    3
    4
    5
    6
    7
    Generating public/private rsa key pair.
    # 随后出现以下内容：id_rsa是默认的文件名（一般都是这个），此处回车默认即可
    Enter a file in which to save the key
    (/Users/you/.ssh/id_rsa): [Press enter]
    # 回车后，还会出现以下内容，这是让你设置使用 SSH 密钥时的密码，由于我们都是在自己个人的电脑上操作，所以仍然回车，不设置密码即可。
    Enter passphrase (empty for no passphrase): [Type a passphrase]
    Enter same passphrase again: [Type passphrase again]
  1. 将 SSH Key添加到 ssh-agent

  • 在 Git Bash 下执行如下命令，开启 ssh-agent

    1
    eval "$(ssh-agent -s)"

  • 将这个 SSH Key添加到 ssh-agent 里去，运行如下命令，其中 id_rsa 是你的 key 文件的文件名：

    1
    ssh-add ~/.ssh/id_rsa
  1. 将SSH Key添加到 GitHub中

  • 用Git Bash将SSH Key拷贝出来：

    1
    2
    $ clip < ~/.ssh/id_rsa.pub
    # Copies the contents of the id_rsa.pub file to your clipboard

    id_rsa是刚刚的SSH Key文件，此时密匙已经在剪贴板中

  • 登录GitHub账号

  • 依次点击

    • 头像
    • Settings
    • SSH and GPG keys
    • New SSH key

  • 在 Key 里面把 SSH Key 粘贴进去

  • 点击 Add SSH key

详情参考官方文档：Adding a new SSH key to your GitHub account

  1. 测试连接

  • 在Git Bash中输入

    1
    ssh -T git@github.com

  • 然后会出现一个确认的信息，输入yes，然后回车。出现以下内容则成功：

    1
    2
    Hi XXX! You've successfully authenticated, but GitHub does not
    provide shell access.
  1. Hexo部署

  • 在终端中运行如下命令，安装 hexo-deployer-git 插件： 

    1
    npm install hexo-deployer-git --save

  • 在 _config.yml 中修改参数，如下所示： 

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/XXXX/XXXX.github.io.git
      branch: master

  1. 提交内容到GitHub Page中

    在终端执行 hexo deploy 命令，就可以把我们的网站部署到 Github 服务器上。在第一次部署的时候，Github 还会跳出来一个小窗口，让你输入 Github 帐号和密码，输入即可。等待 15 分钟的样子，就可以通过 your_name.github.io （your_name 是你的 Github 用户名）来访问自己的网站了。

到此全部工作完成!! 恭喜~ 撒花~

参考：