【持续更新】Hexo+GithubPage快速搭建个人博客

前言

精简精简再精简,enjoy it:


www.simon96.online

欢迎在文末留言,或者点击加入QQ群933583982互相交流。

本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处

一、搭建环境

安装依赖

安装Hexo

  1. WIN键+R键打开运行,输入cmd后回车,进入命令提示符。

  2. 在命令提示符,输入以下命令,回车:

    npm install -g hexo-cli
    

二、建立网站

建立本地网站

  1. 初始化

    在命令提示符,输入并回车以下命令:

    hexo init "folder" && cd "folder" && npm install
    

    以上两个"folder"指站点文件夹,替换为你的文件夹。例如:"blog"

    注意注意注意

    • 以下所有hexo相关命令均在站点文件夹下执行。例如:hexo ghexo shexo d
    • 如何在站点文件夹下执行?进入站点文件夹,空白处shift+右键,点击Git bash here,输入hexo命令即可运行。
  1. 生成网站

    在命令提示符,输入以下命令:

    hexo g
    
  2. 开启本地网站服务

    在命令提示符,输入以下命令:

    hexo s
    

    恭喜!浏览器打开http://localhost:4000/,这就是本地的网站。

将本地网站推送至互联网

  1. 创建Github账号
  2. 创建仓库

    仓库名为:<Github账号名称>.github.io ,形如:simonhe96.github.io

    Github账号名称,不是昵称。

  3. 将本地Hexo博客推送到GithubPages
    1. 安装hexo-deployer-git插件。
      npm install hexo-deployer-git --save
      
    2. 创建SSH key。

      在命令行(或Git Bash)输入以下命令, 回车三下:

      ssh-keygen -t rsa -C "邮箱地址"
      
    3. 将SSH key添加到 github。

      复制密钥文件内容(路径形如C:\Users\Administrator\.ssh\id_rsa.pub),粘贴到New SSH Key即可。

    4. 测试是否添加成功。

    在命令行(或Git Bash)输入以下命令:

    ssh -T git@github.com
    

    返回yes即可。

    1. 添加仓库地址。

      修改_config.yml(在站点目录下)

    deploy:
    type: git
    repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git
    branch: master

    
    6. ###### 将网站推送到仓库。
    
     在命令行(即Git Bash)输入以下命令 :
    
    

    hexo c && hexo g && hexo d

    
     返回`INFO Deploy done: git`即成功推送。
    
     等待1分钟左右,浏览器访问网址: `https://<Github账号名称>.github.io` 
    
    

至此,您的Hexo博客已经搭建在GithubPages, 域名为https://.github.io

三、指定域名

  1. 域名解析。
    1. 在购买域名的平台,找到域名解析界面。例如:产品-域名-域名管理-“解析”

    2. 添加域名解析。

      参数如下:

      类型选择为 CNAME;
      
      主机记录即域名前缀,填写为www;
      
      记录值填写为<Github账号名称>.github.io;
      
      解析线路,TTL 默认即可。
      
  2. 仓库设置。
    1. 打开仓库设置。

      浏览器打开,形如:https://github.com/<Github账号名称>/<Github账号名称>.github.io/settings

    2. 添加域名。

      在Custom domain下,填写自定义域名,点击save

    3. 在站点目录的source文件夹下,创建并打开CNAME.txt,写入你的域名(如www.simon96.online),保存,并重命名为CNAME

    4. 推送到仓库。

      hexo c && hexo g && hexo d
      
  3. 等待10分钟左右。

    浏览器访问自定义域名。

    至此,您可以使用自定义域名访问Hexo博客,https://<Github账号名称>.github.io依然可用。

四、更换主题

  1. 选择主题

    博主用的是NexT

  2. 应用主题

    1. 下载主题。

    2. 将主题文件夹,粘贴到站点目录的themes下。

    3. 更改站点配置文件_config.yml

    找到theme字段,更改为主题文件夹的名称,形如:

    theme: 主题文件夹的名称
    
    1. 本地预览

      hexo c && hexo g && hexo s
      

      觉得主题不好,可重复1-4步。

    2. 推送

      hexo c && hexo g && hexo d
      
  3. 优化主题

    这一步也可以不做。

五、写作

创建文章

  1. 命令:

    hexo new [layout] "<title>"
    

    形如:hexo new post "hello world"

  2. 参数说明:

    • [layout]可以是以下三种:
    参数名 功能 文章路径
    post 新建博文 source/_posts
    page 新建页面(如404,分类) source
    draft 草稿 source/_drafts
  1. <title>

    最好是英文或拼音。

    是博文文件名,也是博文链接的后缀,不是博文标题。

    形如https://www.simon96.online/2018/10/12/hexo-tutorial/的hexo-tutorial。

编辑器

建议Typora,原因是用起来和Word类似,所见即所得。

语法

记不住语法的,建议使用快捷键。

Front-matter

就是博文最上方以 --- 分隔的那部分。

默认可以使用的Front-matter:

参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址

六、网站迁移

需要重新搭建环境,拷贝站点文件夹。
注意:一定要保护好站点文件夹。一定要保护好站点文件夹。一定要保护好站点文件夹。

以上。

欢迎阅读原文:https://www.simon96.online