banner
NEWS LETTER

搭建个人博客(Github+Hexo)

Scroll down

前言

  关于博客平台,我之前也是接触过一些(如:WordPress、Typecho )这些博客都是基于PHP编写的,由于我不会PHP,写文章经常 ”三天晒网,两天打渔” ,所以之前搭建博客后刚开始坚持写了一段时间后就闲置了,等后面心血来潮的时候,又发现服务器过期了。
   这段时间经过再三犹豫后,下定决心改变( 拖延的习惯 ),所以经过查找发现,发现有 Hexo 这个博客平台,这个大大省去了服务器,将文件直接托管到Github上,甚至都不需要域名,真正的0成本搭建个人博客!!!

Hexo:会将markdown文章生成为静态页面


环境及软件

GIthub、Vscode、Github、Node、Hexo
> 软件一般用官网最新稳定版即可

Git

安装Git 参考:https://blog.csdn.net/mukes/article/details/115693833
1、安装后配置用户名和邮箱:

1
2
git config --global user.name "github 用户名"
git config --global user.email "github 注册邮箱"

2、生成ssh密钥

1
ssh-keygen -t rsa -C "github 注册邮箱"

3、复制 C:\Users\用户名.ssh\id_rsa.pub内容
4、登录Github页面,用户设置SSH Keys选项中,添加SSH key,Title随便填写,key值为 上一步骤复制的内容

NodeJs

安装:https://nodejs.org/en/
控制台输入 node -v 以及 npm -v ,输出了对于的版本号 就说明安装成功。
更换淘宝源:
由于node默认的npm源是国外的,安装部分软件会导致失败,所以我们手动更改为国内淘宝源

1
npm config set registry https://registry.npm.taobao.org

Hexo

1、安装hexo
在任意目录下插件文件夹(根据个人爱好来),并且空白地方右键打开Git Bash输入

1
npm i hexo-cli -g

2、初始化hexo项目

1
2
hexo init 
npm install

3、运行Hexo
浏览器打开:http://localhost:4000

1
hexo serve  或 hexo s

部署到Github

创建仓库

登录Github上,创建一个仓库,设置为public,仓库名称: Github用户名+github.io(例如:aaa.github.io),因为我们后面访问是 https://用户名.github.io 访问你的博客。

部署

安装hexo-deployer 插件
用于:将文件推送到github仓库中

1
npm install hexo-deployer-git

在博客根目录 _config,myl 文件中编写如下配置
注意仓库分支名称 要和 下方branch值一致

1
2
3
4
deploy:
- type: git
- repo: https://github.com/用户名/用户名.github.io
- branch: main

编写文章

在github bash中进入博客目录,输入以下目录

1
hexo n "文章标题"

blog/source/_posts 目录下会有 上方 文章标题.md 的文件,打开并且编写内容即可

推送

在git bash中进入博客根目录,输入以下命令

1
hexo g && hexo d

到此,博客就算搭建完成,就可以编写文章,然后推送到Github上,使用网址访问。
下方是进阶操作,根据需要部署。

绑定域名

  很多时候访问博客,一般都是用自己购买的域名访问,使用 用户名.github.io 访问太麻烦了,而且也不好记,所以我们需要去 域名商 去购买一个自己的域名。
   我是在阿里云购买的域名,国内的话就推荐阿里的万网,下面是以万网为例。
1、登录阿里云,打开控制台找到域名,找到购买的域名,点击解析。
2、添加记录
主机类型:www,记录类型:CNAME,记录值:用户名.github.io,TTL:600
主机类型:@,记录类型:CNAME,记录值:用户名.github.io,TTL:600
3、Github设置绑定域名
Settings -> Pages -> Custom doamin 添加你的域名,Save即可

此时,博客根目录下会出现CNAME文件,内容是你的域名;
如果没有,就在根目录/source/ 下 创建CNAME文件(无后缀),把你的域名添加进去

然后执行 hexo g && hexo d 即可
4、访问域名
我的域名是:treize.top,所以浏览器中输入: https://treize.top 即可访问博客
博客


美化博客

经过上方的设置之后,就得到了一个简单的博客,Hexo默认提供的主题是不太好看的,如果你也使用跟我一样炫酷的主题,则需要安装第三方主题,我使用的主题是Async ,关于使用该主题有链接官方文档,可以参考安装使用。

官方推荐主题:https://hexo.io/themes/
看到想更换的主题,会有相关的Github/Gitee的链接,点击访问后,下方也有对于的使用文档。


总结

到此,一个炫酷的Hexo博客就这样搭建完成了,步骤其实挺简单的,快去试试吧!
对于文档中不清楚的,可以在下方留言,看到会及时回复哦!

其他文章