利用 Github Pages 搭建个人博客

发表于 更新于 分类于 本文字数： 661 阅读时长 ≈ 3 分钟

现如今，想搭建一个博客网站，当然不用自己从头开始写 html\css\javascript，因为有许多开源的代码可以供我们选择。Hexo 就是一个专门用于博客类网站的开源项目，使用 Node.js 语言开发，网上大多数的个人博客都是使用这个框架搭建的。同时，利用 Github 提供的 Pages 服务，可以免费搭建博客网站。

安装 Node.js

安装 Git

配置 Git 参数

  1. 打开”Git Bash”，配置用户名和邮箱。

    1
    2
    3
    # 其中 username 和 username@XXX.com 是你注册 GitHub 的用户名和邮箱
    git config --global user.name "username"
    git config --global user.email "username@XXX.com"

  2. 生成并查看 SSH Keys。

    1
    2
    3
    4
    5
    # 生成 SSH Keys
    ssh-keygen -t rsa -C "username@XXX.com"
    # 查看 SSH Keys
    # cat后面的路径是生成的公钥文件路径，直接复制过来就可以
    cat /c/Users/XXX/.ssh/id_rsa.pub

  3. 复制 SSH Keys 内容。

  4. 打开 Github，点击右上角的头像，点击”Settings”。

  5. 点击”SSH and GPG keys”，然后点击”New SSH keys”。

  6. Title 任意名称都可以，Key填写上一步复制的公钥内容，最后点击”Add SSH key”。

  7. 测试 Git 是否配置成功。出现”你的用户名”和”successfully”字样，说明配置成功。

    1
    2
    # 下面的命令什么都不用改
    ssh -T git@github.com

安装 Hexo

本地安装 Hexo

  1. 新建空文件夹，用来存放 Hexo 文件和博客文章。

  2. 进入新建的文件夹，右键选择”Git Bash Here”，依次输入以下命令。

    1
    2
    3
    4
    5
    6
    # 安装 Hexo 框架
    npm install -g hexo-cli
    # 初始化文件夹
    hexo init
    # 安装 hexo 依赖包
    npm install

  3. 查看本地博客效果，依次输入以下命令。

    1
    2
    3
    4
    5
    6
    # 清理 Hexo
    hexo clean
    # 生成静态网站
    hexo g
    # 启动服务器
    hexo s

  4. 打开浏览器，输入网址”http://localhost:4000/“

更换 Hexo 主题

Hexo 主题网站

以安装指定版本的 Next 主题为例：

  1. 在博客根目录，右键选择”Git Bash Here”，输入以下命令。

    1
    npm install hexo-theme-next

  2. 用记事本打开博客根目录下的 “_config.yml”文件 ，找到”theme”标签，将”landscape”改为”next”。

  3. 查看本地博客效果。

部署到 Github Pages

创建 GitHub Pages 仓库

新建 Github 仓库，按如下格式填写。

  • Repository name：<你的用户名>.github.io。例：AbandonSSR.github.io
  • Description：可为空
  • Public：勾选

开启Github Pages

  1. 进入创建的 Github Pages 仓库，点击”Settings”。
  2. 进入”Page”设置页面，将Source中的分支改为”master”，同时点击”Choose a theme”选择初始主题。
  3. 稍等片刻，在浏览器中输入网址”https://<你的用户名>.github.io/“。例：https://AbandonSSR.github.io

部署

  1. 安装 Hexo 发布插件。在博客根目录下，右键，打开”Git Bash Here”，输入以下命令，安装”hexo-deployer-git”。

    1
    npm install hexo-deployer-git

  2. 用记事本打开博客根目录下的 “_config.yml”文件，拉到文件最后一行，修改为下面的配置（没有的配置项自行添加）。

    1
    2
    3
    4
    5
    # 其中 xxxxxx 是前面多次用到的你的GitHub用户名
    deploy:
      type: git
      repo: git@github.com:xxxxxx/xxxxxx.github.io.git
      branch: main

  3. 执行下面的命令。

    1
    2
    3
    4
    5
    6
    # 清理 Hexo
    hexo clean
    # 生成静态网站
    hexo g
    # 部署到Github
    hexo d

  4. 打开浏览器，输入网址”https://你的用户名.github.io”，可以看到和本地部署一模一样的博客出现了。