github + hexo 简单搭建 github.io 网站

网站
Word count: 1.3k   |   Reading time≈ 5 min

系统配置

这里先说一下我的系统配置以供参考

Ubuntu 20.04 5.13.0-51-generic x86_64

本地前置要求

  • node.js >= 10.13

  • Git

  • hexo

node.js

按照 官方安装方式 , Ubuntu 采用安装命令行, 这里安装的版本是18.4.0.

1
2
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

进行测试

1
npm --version

出现版本号, 即为安装成功.

Git

Ubuntu 安装命令

1
sudo apt-get install git

hexo

创建一个空文件夹作为 hexo 安装路径的同时也会是网站根目录.

为了后述具体,此时假设新建的目录路径为: /example

github前置要求

  • github账号

    为了后述具体,此时假设github账号

    用户名为: test

    邮箱为: test@163.com

    密码为: 123456

  • ssh密匙

新建网站远程仓库

  1. New Repository, 命名为

    1
    test.github.io

  2. 打开 test.github.io , 在与 code 同级的 Settings下打开与 General 同级的 Pages. 在Theme Chooser 下选择Choose a theme.

  3. 选择好主题后, 把新弹出的界面拉到底部, 选择commit changes, 网站就可以访问了.

  4. 输入 test.github.io 访问.

设置ssh密匙

为了hexo能够顺利push到我们的仓库, 需要在本地电脑设置ssh密匙

  1. 检查本机是否有ssh密匙

    1
    cd ~/.ssh #检查本机已存在的ssh密钥

    如果存在 No such file or directory, 说明你是第一次使用git, 需要创建ssh.


    或者

    1
    2
    cd ~/.ssh #检查本机已存在的ssh密钥
    ls

    没有任何输出, 需要创建ssh.


    若有ssh密匙, 直接跳转至第 3 步.

  2. 创建ssh密匙

    1
    ssh-keygen -t rsa -C test@163.com

    然后连续3次回车, 最终会生成一个文件在 ~ 下.

  3. 打开 ~ , 找到 .ssh\id_rsa.pub 文件.

    注: 如果打开 ~ ,没有 .ssh 文件夹, 需要 Ctrl + H 显示隐藏文件夹.

    使用记事本一类的程序打开, 复制所有内容.

  4. 打开 github , 点击右上角个人头像, 在弹出的窗口中选择 Settings.
    然后选择与Public profile 同级 Access 下的
    SHH and GPG keys.

  5. 选择 New SSH key .

    title: 随便填

    Key: 粘贴从 .ssh\id_rsa.pub 文件复制的内容

    Add SSH key .

  6. 测试

    1
    ssh -T git@github.com # 注意邮箱地址不用改

    如果提示Are you sure you want to continue connecting (yes/no)?，输入yes, 然后会看到:

    Hi test! You’ve successfully authenticated, but GitHub does not provide shell access.

    看到这个信息说明SSH已配置成功!

Git本地配置：

打开命令行, 输入

1
2
git config --global user.name "test"            // 你的github用户名，非昵称
git config --global user.email  "test@163.com"  // 填写你的github注册邮箱

网站搭建

初始化

在 /example 目录下, 打开命令行, 输入

1
2
sudo npm install -g hexo-cli
hexo init

加载主题

在Hexo官网选择喜欢的主题, 这里以Ayer 主题为例, 输入

1
npm i hexo-theme-ayer -S

主题设置

  1. 主题使用


    将 /example 目录下的 _config.yml 里的 theme 值修改成 ayer

    1
    theme: ayer

  2. 必要插件


    在 /example 目录下, 打开命令行, 输入


    1
    npm install hexo-generator-searchdb --save
    1
    npm install hexo-generator-feed --save

    打开/example 目录下的 _config.yml, 输入


    1
    2
    3
    4
    5
    # hexo-generator-searchdb
    search:
    path: search.xml
    field: post
    format: html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: " "
    order_by: -date

  3. 可选插件


    在 /example 目录下, 打开命令行, 输入


    1
    npm install hexo-generator-index-pin-top --save
    1
    2
    npm install --save hexo-helper-live2d
    npm install npm install --save live2d-widget-model-xxx  # xxx为你选择的模型

    打开/example 目录下的 _config.yml, 输入


    1
    2
    3
    4
    5
    # 已存在
    index_generator:
    path: ''
    per_page: 10
    order_by: -date
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    debug: false
    model:
      use: live2d-widget-model-wanko  # 选择模型
    display:
      position: right
      width: 150
      height: 300
    mobile:
      show: true
    react:
      opacity: 0.7

    更多插件查看 hexo 插件市场.

  4. 菜单处理


    Ayer 初始情况下, 菜单的分类(categories), 标签(tags), 旅行(tags/旅行), 友链(friends), 关于我(2019/about), 点击全部显示 error, 需要初始化.

    模板, 对 XX(path) 的初始化:


    a. 在 /example 目录下, 打开命令行, 输入

    1
    hexo new page XX

    b. 打开 /example/source/XX, 复制 index.md 到 /example/source/path, 删除 /example/source/XX 目录.


    c. 打开 index.md, 全部替换输入

    1
    2
    3
    4
    5
    ---
    title: XX
    type: "XX"
    layout: "XX"
    ---

  5. 本地测试


    在完成上述操作后网站模板搭建完毕, 可以在本地查看网站效果.


    在 /example 目录下, 打开命令行, 输入

    1
    2
    3
    4
    # hexo 网站生成命令
    hexo g
    # hexo 网站本地部署命令
    hexo s -p 8008

    打开 http://localhost:8008/ 即可查看部署效果.

  6. 部署处理


    在push网站到git之前, 要在/example 目录下的 _config.yml, 输入

    1
    2
    3
    4
    deploy:
    type: git
    repository: git@github.com:test/test.github.io.git
    branch: master

    在 /example 目录下, 打开命令行, 输入下述命令部署到云端.


    1
    2
    3
    4
    # hexo 网站生成命令
    hexo g
    # hexo 网站云端部署命令
    hexo d

    打开 https://test.github.io/ 即可查看部署效果.

新增页面

文章页面的新增和菜单的处理不同.

  1. 在 /example/source/_posts 目录下, 新建md文件.

  2. md写入:

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 文章名
    date: 2022-07-02 21:22:45       # 时间
    tags: [网站, hexo, github]      # 标签, 可以填入多个
    categories: [网站]              # 只能填入一个
    ---
    正文

以上, 网站搭建完成.

  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2022 eightyninth
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信