Hexo 博客搭建基础教程(I)

前言📝
Hexo 是一个快速、简洁且高效的博客框架，Hexo 使用 Markdown解析文章，在几秒内，即可利用自己喜爱的主题生成静态网页。
Markdown 可以看 gitHub 的基本撰写和格式语法

准备 📕

目前使用Windows平台搭建hexo博客

  • Windows10
  • Git
  • Node
  • Hexo
  • GitHub 帐号

安装Git 🤷

点击查看教程

Git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理 ，

官网上有详尽的安装教程：[git官方下载](https://git-scm.com/downloads)windown系统下的就是下载exe文件，一直点击下一步就可以了。安装完成后，在任何一个文件夹内点击鼠标右键：

看到这两条，则说明安装成功

配置git 🤔

点击查看教程

在安装完成之后，需要对git进行配置，用来说明你的身份。(可能听不懂，多看几个教程)

1
2
3
4
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
# 把Your Name改成你的昵称；
# 把email@example.com改成邮箱的格式，只要格式正确即可。

常用命令 👌

点击查看教程 
1
2
3
git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

通过git config -l 检查是否配置成功 ⌨️

点击查看教程 
1
git config -l

安装 Hexo 🐉

点击查看教程

所有必备的应用程序安装完成后，即可使用npm安装Hexo

1
npm install -g hexo-cli

查看Hexo版本 🌠

点击查看教程

安装完后输入hexo -v验证是否安装成功。

1
hexo v

修改端口 🐣

点击查看教程

启动服务器。默认情况下，访问网址为： http://localhost:4000/,所以咱们可以修改端口，然后启动运行本地

1
hexo s -p 4001

Hexo 基本命令 🐹

点击查看教程 
1
2
3
4
5
6
7
8
9
10
11
生成静态文件：hexo g

清空静态文件：hexo cl

在本地运行：hexo s

部署到网站：hexo d

生成静态文件并部署到网站：hexo d -g 或 hexo g -d

创建新文章：hexo new <file>

创建新文章命令中的 <file> 是文件名，标题在文章中的 title 参数中修改

#Github注册与创建仓库 👯

点击查看教程

  1. 进入官网

  2. 点击右上角的 Sign up

看到Verify your account，则说明创建成功

  1. 继续验证，去自己邮件看看收到验证码，然后拷贝回到github页面进行验证

  2. 填写自己的邮箱、密码、用户名等信息，然后用邮箱验证即可完成。

  3. 注册完成后，点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。

  • 仓库的格式必须为：<用户名>.github.io (注意：前缀必须为用户名)
  • Description：为描述仓库（选填）
  • 勾选 Initialize this repository with a README 初始化一个 README.md 文件
  • 点击 Creat repository 进行创建

连接至Github 🍰

点击查看教程
  1. 执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github
    1
    ssh-keygen -t rsa -C "你的邮箱"
    执行后，打开C盘下用户文件夹下的.ssh的文件夹，会看到 id_rsa.pub

用记事本打开上述图片中的公钥（id_rsa.pub），复制里面的内容，然后开始在github中配置ssh密钥。

  1. 将 SSH KEY 配置到 GitHub
    进入github，点击右上角头像 选择settings

进入设置页后选择 SSH and GPG keys

首先创建key,然后名字随便填写，公钥填到Key那一栏

  1. 测试连接
    1
    ssh -T git@github.com

初始化Hexo博客 👨‍👩‍👧‍👦

点击查看教程

  1. 在目标路径（我这里选的路径为【D:/hexo_blog】）打开cmd命令窗口，执行hexo init初始化项目。

    1
    hexo init blog-demo(项目名)

  2. 进入blog-demo ，输入npm i安装相关依赖。

    1
    2
    cd blog-demo  //进入blog-demo文件夹
    npm i

  3. 初始化项目后，blog-demo有如下结构：

  • 【node_modules】：依赖包
  • 【scaffolds】：生成文章的一些模板
  • 【source】：用来存放你的文章
  • 【themes】：主题
  • 【.npmignore】：发布时忽略的文件（可忽略）
  • 【_config.landscape.yml】：主题的配置文件
  • 【config.yml】：博客的配置文件
  • 【package.json】：项目名称、描述、版本、运行和开发等信息
  1. 输入hexo server或者hexo s 启动项目
    1
    hexo s  //运行本地
5. 打开浏览器，输入地址：http://localhost:4000/ ，看到下面的效果，说明构建成功。

#将静态博客挂载到 GitHub Pages 🐍

点击查看教程
  1. 安装 hexo-deployer-git
    1
    npm install hexo-deployer-git --save
  2. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。
1
2
3
4
deploy:
  type: git
  repository: git@github.com:sunblog3/sunblog3.github.io.git
  branch: main
  1. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。
    1
    2
    3
    hexo clean && hexo generate && hexo deploy  // Git BASH终端
    hexo clean; hexo generate; hexo deploy  // VSCODE终端
    hexo clean && hexo g && hexo s // Git BASH终端 简化
  • hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。
  • hexo generate：生成静态文章，可以用hexo g缩写
  • hexo deploy：部署文章，可以用hexo d缩写

注意：deploy时可能要你输入 username 和 password。

如果出现 Deploy done，则说明部署成功了。

稍等两分钟，打开浏览器访问：https://sunblog3.github.io ，这时候我们就可以看到博客内容了。

解决访问速度慢的问题 🐰

点击查看教程

开源项目Github520
通过修改Host文件的方法解决访问速度慢的问题

连接有效性检验：

1
2
3
# 任选其一即可
ping github.com
ssh -T git@github.com