『Blog』Hexo+Github博客搭建&域名

First time搞博客的时候,是直接GitHub上fork的,qs更新的时候比较闹心

众所周知,期末考试结束之后就是搞事情的时候 :P

……本篇博客全凭回忆(可能有遗漏

QQ图片20210113223050.jpg

搭建环境准备

Node.js的安装和准备

  • 下载Node.js安装文件

    • 根据Windows版本选择:64bit。

    • 保持默认设置,一路【Next】,安装即可。

  • 确认是否安装正确

    • 打开cmd输入

      1
      2
      node -v
      npm -v
    • 若结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

      QQ图片20210114165854.png

Git的安装和准备

  • 下载Git安装文件

    • 根据Windows版本选择:64bit。

    • 保持默认设置,一路【Next】,安装即可。

  • 确认是否安装正确

    • 打开cmd输入

      1
      git --version
    • 若结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

      1.png

GitHub账户注册和配置

  • 注册,并确认注册

  • 创建代码库,Repository name填写YourName.github.io

    例如,GitHub名称为GJnghost,则填写GJnghost.github.io

Hexo安装配置

安装Hexo

  • 在自己认为合适的地方创建一个文件夹,这里以D:/hexo 为例,首先在D盘目录下创建Hexo文件夹,并在命令行的窗口进入到该目录

  • 在cmd中输入

    1
    npm install hexo-cli -g
    • 那么这时候就会发现,它快乐地转了几个小时也没下载下来

      解决方法:修改npm安装源,这里使用淘宝镜像

      1
      npm config set registry https://registry.npm.taobao.org
    • 于是它快乐下载,于是快乐error了

      错误:TypeError:this is not a typed array;

      原因:安装的node版本过低……(所以上文的下载地址改成了官网

    • 如果出现WARN,请忽略它

  • 在cmd中输入

    1
    npm install hexo --save
  • 在cmd中输入

    1
    hexo -v

    若结果如下图所示,则说明安装成功,如果没有且排查不出错误的话,请换篇博客参考(doge

    QQ图片20210114172428.png

hexo相关配置

至此,Hexo本地配置结束

联系Hexo与github page

配置git个人信息

  • 设置Git的user name和email:(第一次的话

    1
    2
    git config --global user.name "GJnhost"
    git config --global user.email "1766933911@qq.com"
  • 生成密钥

    1
    ssh-keygen -t rsa -C "1766933911@163.com"

    三个回车得到密钥

    得到id_rsa和id_rsa.pub,默认文件存储路径:

    1
    C:\Users\Jolin\.ssh
  • 将id_rsa.pub中数据复制

  • 打开Github,个人的【Settings】,在【SSH and GPG keys】中的【SSH keys】中选择【New SSH key】,将上一步的数据粘贴进去

  • 测试

    1
    ssh -T git@github.com

    若显示以下结果则成功

    QQ图片20210114185519.png

配置Deployment

  • 在根目录的_config.yml文件中,找到Deployment,按如下修改

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

    例如

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

使用Hexo主题

以Ayer主题为例

安装

1
2
# 国内用户如果速度较慢,可以把github地址替换为:https://gitee.com/mirrors/ayer.git
git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

将原来的配置文件移动到根目录,并重命名为_config.ayer.yml

修改

1
theme: ayer

更新

1
npm update hexo-theme-ayer -S

发布

在根目录下,右键打开【Git Bash Here】,执行下面命令:

1
hexo d -g #在部署前先生成

如若发布成功,会显示如下图片:

QQ图片20210114184027.png

部署成功后访问 http://www.gjnghost.github.io 即可

  • 于是被提醒

    1
    deloyer not found:git

    需要提前安装一个扩展

    1
    npm install hexo-deployer-git --save
  • 于是又出现了以下错误

    1
    2
    3
    4
    Permission denied (publickey).
    fatal: Could not read from remote repository.
    Please make sure you have the correct access rights
    and the repository exists.

    那就是上述的SSH并没有完成相关配置

插件(必需)

  • hexo-generator-searchdb 用于搜索

    1
    npm install hexo-generator-searchdb --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里(注意不是ayer.xml):

    1
    2
    3
    4
    5
    # hexo-generator-searchdb
    search:
    path: search.xml
    field: post
    format: html
  • hexo-generator-feed 用于生成RSS订阅

    1
    COPYnpm install hexo-generator-feed --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里(注意不是ayer.xml):

    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

    插件(可选)

  • hexo-generator-index-pin-top 用于文章置顶

  • hexo-blog-encrypt 用于文章加密

  • hexo-tag-aplayer 用于播放音乐

  • hexo-tag-dplayer 用于播放视频

  • hexo-helper-live2d 二次元看板娘

更多插件请见 hexo插件市场

分类

1
hexo new page categories

然后将以下复制到 /source/categories/index.md 文件

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

标签

1
hexo new page tags

然后将以下复制到 /source/tags/index.md 文件

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

友情链接

1
COPYhexo new page friends

然后将以下复制到 /source/friends/index.md 文件

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

然后在 ayer 主题目录下的 _config.yml 中自定义 friends_link 配置项即可

文章目录

用 Tocbot 解析文章标题并生成目录。当然你可能并不想所有文章都生成悬浮目录,你可以在文章顶部的配置中加一行来进行关闭:

1
2
3
---
no_toc: true
---

一些其他的

图片引用

推荐图床:SM.MS

TQL!!!

修改大标题和站点信息

站点配置文件 _config.yml 是 Hexo 站点根目录下的主配置文件,注意:不是_config.ayer.xml

修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改 Hexo 博客目录下的 _config.yml

例如:

1
2
3
4
5
6
7
8
9
10
# Site
title: Gghost
SEOTitle: 耹也的博客 | GJ Blog
subtitle: '剔透'
description: 'No can, but will.'
email: 1766933911@qq.com
keywords: "学习,兴趣,旅行,代码,博客"
author: Gghost
language: zh-Hans
timezone: Asia/Shanghai

百度统计

在百度统计中创建

_config.ayer.xml中的 baidu_analytics 填上百度统计代码中的 hm.js? 后面那一串东西

域名更换

域名购买

好废话!(捧读

域名解析

  • windows 下直接在 cmd 里 Ping 一下自己的博客就会得到自己 github 的二级域名的 IP地址:

    1
    ping username.github.io #username为自己的github用户名
  • 进入阿里云的管理控制台-域名与网站-云解析 DNS,进入域名的解析设置,点击新手指导,将得到的 IP 地址填到记录值一栏,点击确定就 OK 了。记录值就是自己 github 的二级域名的 IP地址。

设置CNAME

在本地Hexo根目录下的source 文件夹中创建 CNAME 文件(无后缀),在里面写入购买的域名,如图所示:

QQ图片20210114190655.png

设置GitHub Pages

打开 username.github.io 项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填入购买的域名,如图所示:

QQ图片20210114190655.png


  • 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 © 2021 Gghost
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信