零 楔子
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
偶然间了解到了 Hexo 这个静态博客网站,通过github绑定,无需购买服务器 就可以生成完全属于自己的博客网站(白嫖)。
因为不熟悉前端,我在搭建过程中也经历了许多的坑,现在我将搭建流程分享出来,希望能给你们提供一些帮助。这是我的两个博客网站:gitee.io 和 heeh.xyz,大家可以点开看看搭建好后的效果。
最重要的是它是免费的,里面也有很多插件和博客主题模板,你完全可以根据自己的喜好来设置它的风格。
心动不如行动,现在就开始搭建属于自己的博客吧。有什么问题可以在评论区讨论,觉得有用的兄弟萌可以点个赞😝
一 运行环境准备
本文环境信息:
- 环境的下载只需点开网站找到适合自己的版本安装即可,这里不赘述🍉。
- 安装完毕后可以通过cmd命令行输入
node -v
,npm -v
和git --version
来验证,如果出现下图则安装成功。
修改npm的镜像源为在国内更为稳定的淘宝镜像源(建议永久设置)
# 临时改变镜像源 npm --registry=https://registry.npm.taobao.org # 永久设置为淘宝镜像源 npm config set registry https://registry.npm.taobao.org # cnpm安装,在国外服务器不佳时就可以用cnpm代替npm命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
二 Github准备
- 打开GitHub,登陆你的账号。
- 新建一个格式为
你的用户名.github.io
的仓库
- 创建成功后在桌面点击右键,
Git Bash Here
,打开Git的命令行输入这两行代码:
git config --global user.name "此处填写你注册github时的用户名" git config --global user.email "此处填写你注册github时的邮箱" 复制代码
- 然后就可以在
C:/Users/[username]/
下找到.gitconfig
文件(如果没能找到,请打开显示windows显示隐藏文件的功能),用编辑器打开看到以下内容代表配置成功。
三 安装Hexo
- 首先新建一个文件夹👀作为你的博客文件的存放位置,点进去打开Git命令行分别输入:
# hexo框架的安装 npm install -g hexo-cli # 等上一个命令完成后,再输入下面的命令 hexo init # 安装博客所需要的依赖文件 npm install 复制代码
💥 Tips:Hexo一大好处就是你在安装过程内出现了任何问题,都大可以删掉文件夹重来。 注意后续所有操作都应该在这个文件夹目录下进行~
- 等待运行完成,你会发现此时文件夹内多了好多文件。此时本地搭建完成,我们来运行一下试试看,输入以下命令:
hexo g hexo s
- 根据提示我们打开 http://localhost:4000 ,就可以看到生成的网页,说明Hexo已经成功在本地运行。
四 发布到Github
我们已经完成了Hexo下载安装和本地运行,接下来将本地博客发布到Github让别人也能通过网址访问你的博客。
- 在本地文件夹下打开Git命令行,分别输入以下命令
# 安装用来发布的插件 npm install hexo-deployer-git --save # 将本地目录与Github关联起来 # 这步输入后一直回车即可 ssh-keygen -t rsa -C "你的邮箱地址" 复制代码
- 在
C:/Users/[username]
目录下找到名为.ssh
的文件夹,打开其中的id_rsa.pub
,复制里面的的内容。 然后打开 Github,点击右上角的头像 Settings 选择 SSH and GPG keys。
点击 New SSH key 将之前复制的内容粘帖到 Key 的框中,Title 可以随意,点击 Add SSH key 完成添加。
- 回到命令行界面测试是否与Github连接成功,输入
ssh -T git@github.com
,出现一个询问内容输入yes
,出现You’ve successfully …
说明连接成功。
- 进入博客站点目录,用文本编辑器打开
_config.yml
,这个_config.yml
是博客的配置文件,在以后会经常使用到,修改如下图的几个地方:
然后滑到文件最底部deploy
处添加如下代码:
type: git repo: git@github.com:github用户名/github用户名.github.io.git branch: master
- 最后一步,生成页面并发布,我们执行如下命令:
# generate, Hexo会根据配置文件渲染出一套静态页面 hexo g # deploy, 将上一步渲染出的一系列文件上传至至Github Pages hexo d # 或者也可以直接输入此命令,直接完成渲染和上传 hexo g -d 复制代码
- 上传完成后,在浏览器中打开网址
你的github用户名.github.io
,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话等一下或按ctrl+f5
刷新清除一下浏览器缓存试试。
五 写文章
- 在博客文件夹的
/source/_posts
目录下新建或修改md格式的文章,每个文章前都至少添加以下front-matter
字段。
--- title: hexo文章 date: 2021-08-17 22:25:00 --- 复制代码
- 每次上传都应该在命令行输入:
hexo cl hexo g -d