Duke's Tech Blog
0%

使用Github Pages创建个人博客

发表于

Hexo为一快速、简洁且高效的博客框架，本文主要记录通过Hexo，借助Github Pages搭建个人博客，并配置主题为NexT的过程。

软件安装

安装并配置Git

安装Git

1
2
3
4
# 本地执行如下代码
git config --global user.name "Username"            # Username为GitHub的注册用户名
git config --global user.email "Email"              # Email为GitHub的注册邮箱
git config --list                                   # 查看已设配置(Username,Email)是否正确

安装Node.js

Node.js 下载链接

安装Hexo

1
2
npm install -g hexo-cli
npm install hexo-deployer-git                       # 安装hexo-deployer-git插件

创建并配置Github账号

创建Github账号

访问Github官网进行注册

创建GitPages

即创建与账号 同名 的Repository，例如GitHub帐号是yourid，则新建的Repository名称应为yourid.github.io
创建之后可浏览器访问yourid.github.io，如果能够正常访问，则证明GitPages创建成功

生成本地SSH Key

本地生成一个SSH Key

1
ssh-keygen -t rsa -C "Email"                        # Email为GitHub的注册邮箱

根据页面提示输入相关信息，可以连续回车采取默认配置。
最终生成结果如下，*.pub即为公钥文件。

复制公钥内容到Github账户信息中

  • 打开~/.ssh/id_rsa.pub文件，复制里面的内容，如下
  • 打开Github官网，登录后进入到个人设置(点击头像->setting)
  • 点击右侧的SSH Keys，点击Add SSH key
  • 填写title之后，将之前复制的内容粘贴到Key框中
  • 点击Add key提交

测试SSH是否配置成功

1
2
3
4
# 本地执行如下代码
ssh -T git@github.com
Hi yourid! You've successfully authenticated, but GitHub does not provide shell access.
# 如提示以上信息，则证明ssh配置成功

Hexo建站

使用hexo进行本地建站

1
2
3
4
# 本地执行如下代码
cd C:/hexo                          # 切换到本地目录
hexo init C:/hexo                   # 进行Hexo初始化
npm install                         # 安装

如果Hexo安装成功，则在本地Hexo目录下的目录结构如下，详细文件含义见Hexo官方文档

1
2
3
4
5
6
7
8
.
├── _config.yml                     # 网站配置文件，可在此配置大部分的参数
├── package.json 
├── scaffolds                       # 模板文件存放路径。新增文章时Hexo会根据scaffold创建文件
├── source                          # 用户资源存放路径
|   ├── _drafts
|   └── _posts
└── themes                          # 网站主题存放路径。Hexo会根据主题来生成静态页面

本地验证是否可用

本地启动默认的静态网站。访问地址为：http://localhost:4000/

1
hexo server --debug

配置部署信息

打开本地Hexo目录中的_config.yml文件，找到如下配置并根据注释说明更新

1
2
3
4
5
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy: 
  type: git                                         # 在yml文件中，:后面需要要带空格 
  repo: git@github.com:yourid/yourid.github.io      # 其中yourid为GitHub的注册用户名

生成静态文件并部署到GitPages

1
2
3
$ cd c:/hexo                                        # 进入网站根目录
$ hexo generate                                     # 编译本地内容并生成静态文件
$ hexo deploy                                       # 部署静态网页文件到GitHub

此时，通过访问 http://yourid.github.io 可以看到默认的Hexo首页

Hexo其他常用操作

发布文章

1
hexo n "postname"                                   # 新增文章

命令执行后，会在Hexo的source_post文件夹下新建一个名为”postname.md”的文件，也可以直接在Hexo的source_post文件夹下新建.md结尾的文件。新增文件后重新进行编译和部署以在GitHub Pages上生效。

1
2
$ hexo generate                                     # 编译本地内容并生成静态文件
$ hexo deploy                                       # 部署静态网页文件到GitHub

更新Hexo主题

下载NexT主题

5.1.1版本下载地址
下载后解压文件，重命名为next，拷贝到C:\hexo\themes 目录

修改网站的主题为NexT

打开C:\Hexo下的_config.yml文件，按照如下配置，找到theme字段，将其修改为next 

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

增加搜索功能

  1. 安装插件 
    1
    npm install hexo-generator-searchdb --save
  2. 全局配置文件_config.yml，新增如下内容 
    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
  3. 修改主题配置文件（\themes\[主题名]\_config.yml），将local_search的enable改为true： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

增加Gitalk评论系统

  1. Github新增OAuth Apps
    打开https://github.com/settings/developers，选择OAuth Apps，点击 New OAuth App
  2. 根据实际情况填写
    Application name：应用名称
    Homepage URL：主页地址，填写博客地址即可
    Application description：描述
    Application callback URL：应用回调地址，填写博客地址即可
  3. 创建APP后，记录client_id，并生成新的client_secret
  4. 修改主题配置文件
    修改（\themes\[主题名]\_config.yml），在 # Gitalk 字段添加如下配置： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    gitalk:
      enable: true
      github_id: [你的Github ID]
      repo: [repo名，后续评论会以issues的形式生成到对应的repo下]
      client_id: [上一步创建的client_id]
      client_secret: [上一步生成的client_secret]
      admin_user: [你的Github ID]
      distraction_free_mode: true # Facebook-like distraction free mode
      # Gitalk's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
      language: zh-CN

其他