前言
首先非常感谢羊哥的教程,跟着一步步操作,非常快速地搭建好了个人博客。这里抛出两个链接:
b站教学视频:https://www.bilibili.com/video/BV1Yb411a7ty
羊哥的个人博客:https://www.codesheep.cn/
上个学期的Python课设就写了一个基于Flask框架的博客管理系统,虽然用起来很方便,但是写起来还是有点繁琐的。框架的学习还是有一些成本在内的,而且前端如果没两把刷子那真的是不能看😂。假期是有打算继续优化下那个项目,“稍微”改一下部署到服务器上去(前端的静态模板我都找好了,这里再安利一下杨青青的个人博客:https://www.yangqq.com/ 里面的模板还是非常好看的,静态和动态的模板都有~~)
但是奈何自己太辣鸡,这玩意儿倒不是说不想碰了,就是感觉好麻烦,一个功能实现太耗时(这个项目大部分时间都花在了前端上,出bug最多的地方也在前端)。但是用起来确实方便,不像静态博客,目前更新一次的操作步骤比起项目来说还是繁琐了一些。综合考虑了一下还是选择了静态博客,用Hexo搭建,在前端框架基础之上DIY,还是蛮有趣的。
搭建博客
前期准备
-
安装Node.js
-
为了解决速度慢的问题。建议给Node.js换一个镜像源,这里根据羊哥的教程更换了淘宝的镜像源,代码如下:
1 | npm install -g npm --registry=https://registry.npm.taobao.org |
-
安装Hexo
官网链接:https://hexo.io/
直接在首页复制代码,粘贴运行就好:
1 | cnpm install -g hexo-cli |
快速搭建
-
初始化
在本地创建一个文件夹,作为博客部署的空间。(注:以后所有的操作都基于此文件夹,如果出现了什么问题无法解决,删掉重来就好)在此文件夹内初始化hexo:
1 | hexo init |
接下来就会在此目录下自动生成一些文件,初始化完成
- 启动本地服务
1 | hexo s |
通过本地默认的4000端口访问:http://localhost:4000
-
尝试写第一篇博文
语法:hexo n “文章名称”
1 | hexo n "第一篇博客文章" |
然后会发现在sourse/_posts
目录下,生成一个.md
文件,在此就可以编写文章了。
- 清理缓存
1 | hexo clean |
- 生成静态文件
1 | hexo g |
这就是最基本的操作流程啦~~~~
部署到github/gitee
部署到github
-
到github去新建仓库
注意命名格式:账号名.github.io(例:CNhuazhu.github.io)
-
安装git部署的插件
1 | cnpm install --save hexo-deployer-git |
-
设置
_config.yml
文件在博客目录下找到
_config.yml
文件,最底部有一个# Deployment
模块,在此设置:
1 | # Deployment |
- 部署到远端
1 | hexo d |
注:访问可能要过一段时间才会生效;账户中含有大写字母也没有关系,地址栏输入的时候同一替换为小写就可以访问
部署到gitee
前四步和github的方法一样,点击此处跳转到第五步。
-
到gitee去新建仓库
注意:这里同github不同,仓库名可以随便,不必使用自己的账号名
-
安装git部署的插件
1 | cnpm install --save hexo-deployer-git |
- 设置
_config.yml
文件
在博客目录下找到_config.yml
文件,最底部有一个# Deployment
模块,在此设置:
1 | # Deployment |
- 部署到远端
1 | hexo d |
-
开启 Gitee Pages 静态网页托管服务
进入到仓库中,选择服务下拉框中的Gitee Pages选项,进入后点击部署。使用提供的网址即可访问博客:http://cnhuazhu.gitee.io
注:每次重新部署代码到gitee时,都需要点击下方的更新按钮重启page服务
更换主题
hexo提供多种主题,直接抛链接:
hexo主题官网:https://hexo.io/themes/
-
下载主题
可以直接输入命令进行下载,格式:
git clone 主题地址.git themes/目录
,这里以下载yilia
主题为例:
1 | git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia |
然后在themes
目录下就会出现名为yilia
的主题文件夹
-
修改_config.yml文件
找到
# Extensions
模块下的theme
标签(默认为landscape
),将其替换为下载好的主题名称yilia
1 | theme: yilia |
然后再重新清理缓存、部署、启动本地服务、推到远端,就可以啦~~~~
总结
按照教程来操作,没什么难度。
*“一切都是那么的优雅~~~~”*