hexo博客网站搭建

Hexo简介

​ Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装前提

​ 在安装Hexo之前需要安装以下应用

  • Node.js
  • Git
  • markdown语法编辑器(这里推荐typora)

可以通过在cmd中以下命令查看主机中是否安装了node.js和npm

1
2
node --version    #检查是否安装了node.js
npm --version     #检查是否安装了npm

安装Hexo

​ 通过在cmd中输入以下命令使用npm安装Hexo

1
npm install -g hexo-cli

​ 安装完成后输入以下命令，查看hexo版本

1
hexo -v

配置Hexo

1)新建文件夹

​ 此文件夹用于存放hexo所有代码、配置文件。放在自己能记住的地方就行

2)初始化

​ 进入新建的文件夹，右键打开Git Bash Here，输入以下命令进行初始化

1
hexo init

​ 初始化完成后会出现以下的文件目录结构

Snipaste_2023-04-01_17-04-20

  • public .github目录在后面步骤中才会出现

3)新建md文档

​ 在当前目录，右键打开Git Bash Here，输入以下命令新建md文档

1
hexo new "md文档名"

image-20230401171034750

  • 新建的md文档存放在source\_posts目录下

image-20230401171140753

  • 新建的md文档中会自带一些文档信息，可以根据需求填写。不同主题中，头部信息的种类也有所不同。

4)网站生成和预览

​ 首先执行下列命令生成相应的静态网页，生成的静态网页以及相关资源都会在public目录下

1
hexo g

​ 然后输入下面命令可以开启本地网页预览服务

1
hexo s

image-20230401202831699

​ 访问http://localhost:4000即可看到博客内容

5)更换博客网站主题

​ 在Hexo官网中提供了大量优质的主题，你可以任意挑选你喜欢的主题

image-20230401212906423

​ 在主题介绍中往往有安装方法，一般以git clone和npm安装两种方法为主

         主题文件将存放在themes文件夹中

image-20230401213202224

image-20230401213255894

​ 在_config.yml文件中你可以个性化配置你的主题

​ 然后在hexo头目录的_config.yml(注意不是themes中的_config.yml)文件中将theme:处填写上你下载的主题文件名，然后重新输入hexo g hexo s 查看修改效果

image-20230401213448689

6)将博客网站部署到Github

​ 上面生成的网站只是部署在本地的静态网站，想要别人也能访问你的网站，需要使用GitHub Actions部署到GitHub Pages

1)注册GitHub账户

​ 你可以在GitHub官网中注册账户，国内访问可能加载会比较慢

2)新建仓库用于存放网站文件

​ image-20230401203801784

​ 这里仓库名的名字必须为”你的用户名.github.io”

​ 然后默认设置为公开模式，创建仓库即可

image-20230401204210666

3)生成SSH添加到GitHub

​ 在网站文件目录中，右键打开Git Bash Here

​ 1.通过git config命令获取并设置存储库或全局选项。

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"
  • yourname处填写你GitHub用户名
  • yourmail处填写你GitHub注册所用邮箱

​ 可以通过下面两条指令，检查你刚输入的信息

​ 

1
2
git config user.name
git config user.email

​ 确实信息正确后，可以输入下面的指令创建SSH

1
ssh-keygen -t rsa -C "youremail"
  • yourmail处与上面填写的一致
  • 途中会询问你是否创建SSH，输入y回车即可

​ 创建SSH成功后，你可以在Git Bash中输入以下指令找到你生成的SSH

image-20230401210046613

​ 你也可以在C:\Users\用户名\.ssh目录下找到id_rsa.pub文件

image-20230401210158682

​ 复制文件内所有内容待用

  • git中复制快捷键为CTRL+Ins 粘贴为Shift+Ins

​ 然后回到GitHub中进入Settings中找到SSH and GPG keys新建SSH key

image-20230401210601584

​ 将你刚复制的SSH填入创建SSH key image-20230401210659767

​ 然后在git bash中查看是否连接成功

1
ssh -T git@github.com

​ image-20230401210909207

​ 出现successfully即代表连接成功

4)将Hexo部署到GitHub

​ 首先安装deploy-git部署命令

1
npm install hexo-deployer-git --save

​ 然后进入_config.yml文件，在配置文件最底下进行修改

image-20230401211142823

​ 

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

​ repo和branch处按你创建的仓库信息进行填写，如图所示image-20230401211608778

​ 然后通过以下命令，实现部署

1
2
hexo g
hexo d

  • hexo d即hexo deploy部署文件

  • hexo g即为前文中提到的生成静态文件

  • 另有hexo clean命令用于清楚你之前生成的文件

    部署成功后你可以在Actions看到部署进度，当部署完成后，你可以通过访问

    image-20230401212407612

    image-20230401212309733

到处为止，你的个人博客网站就搭建完成啦，愉快的写博客吧

#hexo
hexo博客网站搭建
https://ahaostillcoding.github.io/2023/04/01/hexo博客网站搭建/
作者
a_hao
发布于
2023年4月1日
许可协议