hexo+gitee博客预览网址:

https://wwwwwc.gitee.io/test_pages

一、前期准备

1.1 node.js

官网: https://nodejs.org/zh-cn/

安装方式:一直默认安装就行

1.2 Git

官网:https://git-scm.com/download

阿里淘宝镜像站:https://npm.taobao.org/mirrors/git-for-windows/

安装方式:一直默认安装就行

git 官网下载地址是在 github 上,所以国内下载速度应该很慢,甚至打不开,可以尝试去阿里淘宝镜像站下载最新的版本,速度较快。打开阿里淘宝镜像站拖到最下面,下载对应系统位数的版本即可,我下载就是下面截图的版本

二、hexo 的安装和初始化

2.1 新建项目文件夹

新建一个 testpage 文件夹(名字不重要,要方便找到,可以用自己的名字或者项目的名字),这个文件夹很重要,来会存储你所有博客的 markdown 文件以及生成的 html 文件,慎重选择

2.2 安装 hexo

进入testpage 文件夹,右键点击 Git Bsah Here

在窗口中输入以下代码 npm install hexo-cli -g 开始安装 hexo,静待运行结束,需要等一会儿

可以通过右键终端窗口的黑色区域,选择单击 Paste 或通过 Shift+Ins 来粘贴复制的代码,而不是通过传统的 Ctrl+V 来粘贴。

2.3 初始化 hexo 模板

在命令窗口输入 hexo init 初始化 hexo 模板,这里也需要静待一会

生成的模板文件目录可以参考下面的图片

2.4 开始运行 hexo

运行 hexo,注意是在 testpage 文件夹下运行。按如下顺序依次输入:

hexo clean # 清空已有hexo网站文件

hexo g(or generate) # 依据网页文本与新的CSS样式生成新网站文件

hexo s(or server) # 启动本地服务器,可以在localhost:4000查看网站修改效果

注意:# 及以后文字仅为注释功能。

在浏览器上输入 http://localhost:4000 就能查看演示样式 helloworld 页面:

helloworld 页面

2.5 停止本地服务器运行

image-20211006122603440

通过快捷键 Ctrl + C 来停止本地服务器,就可以继续对网站内容进行修改

三、hexo 的主题美化

3.1 主题在哪里找?

官网:https://hexo.io/themes/

gitee:https://search.gitee.com/?q=hexo+theme

本文推荐主题 butterfly:https://gitee.com/immyw/hexo-theme-butterfly

3.2主题下载

3.2.1 git glone 下载(推荐)

通过代码 git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly 来下载 butterfly 主题,代码中间的 git 地址可以从下图的位置复制

代码运行完成后会在 themes 文件夹直接生成对应的主题文件夹

3.2.2 直接下载压缩包

下载完成后解压,放入到 theme 文件夹

3.3 更换 hexo 主题

同时配置 testpage 主目录中的 _config.yml ,用记事本打开 _config.yml ,下拉至最底部,修改默认 theme: landscape theme: butterfly(和主题的文件夹名字一致)

注意: theme 后面是英文冒号加一个空格

3.4 安装 pug 以及 stylus 的渲染器

如果你没有pug以及stylus的渲染器,请下载安裝: npm install hexo-renderer-pug hexo-renderer-stylus --save

3.5 重新运行新主题

hexo clean

hexo g

hexo s

在浏览器上输入 http://localhost:4000 就能查看

可以看到新的主题比 hexo 的主题美观多了,同时多了很多可自定义的的地方,这样一个属于自己的网站已经完成一大半了

知识星球双节优惠期间,节后涨价

星球提供的服务:python原创课程、python和vba答疑、原创审计工具、星球定制工具、办公实用神器分享、不定期分享神器会员或者兑换码、vba原创课程(准备中)、赠送200积分(用于审计工具箱)等

四、新建文章

4.1 文章开头模板

在博客目录的 source 文件夹中的 _post 文件夹中添加你要写的博客文件,文件命名为file_name.md

file_name.md 的文件开头如下:

每个主题模板支持的文件开头可能有些不一样,具体的需要查看对应主题的说明文档

---
title: file_name
tag: 标签名
categories: 分类
comment: 是否允许评论(true or false)
description: 描述
---

文档正文编写,请参照 markdown 语法。

4.2 基本的 Markdown 语法

以下是最常用的 Markdown 语法,其他 markdown 语法可以去网络上搜索学习下,下面这些基本够用了。

4.3 图片怎么转为网址链接的形式?

我上面提到的图片都是用过图床的形式插入的,你看到的图片是一串网址链接,而不是本地的图片地址,这个是怎么实现的呢?

我自己的方式是 picgo+腾讯云cos,这个方式对于不常用的人来说可能学习成本有点高,我们可以用网上公开免费的转换工具来实现图片转链接。

路过图床:https://imgtu.com/

或者 uTools:http://www.u.tools/

4.4 重新运行查看效果

hexo clean

hexo g

hexo s

在浏览器上输入 http://localhost:4000 就能查看

五、自动部署至 gitee

上面的那些步骤已经让你的网站能够在本地服务器上成功运行了,但是本地服务器只有你自己能查看,为了让网站呈现在更多人面前,我们可以通过 Gitee Pages 服务来进行自动化部署,这样你的网站就有了公开的可分享的网址了

5.1 注册 gitee 账号

gitee 官网:https://gitee.com/

记住你的注册邮箱、注册用户名、注册密码,稍后会用得上。

5.2 新建仓库

注意仓库名称和路径名称要一致,按照图示进行设置就行。

5.3 修改配置文件

配置 testpage 主目录中的 _config.yml ,用记事本打开 _config.yml ,根据你自己的仓库地址来修改配置文件,然后保存

url: 换成你的仓库地址

root: 需要新增一行,换成你的仓库名称

type: 改为 git

repo: 换成你的仓库 git 地址

branch: 改为 master

注意: 上面的关键词后面都是英文冒号加一个空格

deploy:
  type: git
  repo: https://gitee.com/wwwwwc/test_pages.git
  branch: master

5.4 安装 hexo-git 部署工具

npm install hexo-deployer-git --save

5.5 绑定 gitee 账户信息

git config --global user.email "换成你自己的注册邮箱"
git config --global user.name "换成你自己的注册用户名"

5.6 第一次部署 hexo

hexo g --d #一键部署

第一次部署时会弹出一个对话框,提示输入 gitee 码云的账号密码。部署成功后,登陆码云。此时本地文件夹中出现有一个public文件夹,代表部署成功。

5.7 前往 Gitee Pages 手动更新

第一次使用 Gitee Pages 部署页面时,会要求你上传身份证的正、反面和手持身份证照片,进行实名认证。我已经认证过了,所以没有显示。

5.8 访问 Gitee Pages 网址,成功!

六、主题自定义配置(Butterfly)

6.1 官方安装文档

Butterfly 官方安装文档:https://butterfly.js.org/posts/21cfbf15/

6.2 给文章换一个封面

从官方文档我们可以看到, butterfly 主题是支持近 22 各文章开头设置的,我们来尝试给文章换一个封面

top_img: https://z3.ax1x.com/2021/10/06/4xq2s1.png
cover: https://z3.ax1x.com/2021/10/06/4xq2s1.png

注意: top_img 后面是英文冒号加一个空格,cover 同理

!

6.3 在本地服务器上先测试修改效果

hexo clean

hexo g

hexo s

效果如下:

效果和我们预想的一致,在终端窗口通过快捷键 Ctrl+C 停止本地服务器,我们继续配置其他内容

6.4 更换网站的标题、作者、语言

这个我之间就修改了,所以忘记附上修改前的效果图了,当前看到的网站中文、标题和作者名称这些都是下面修改的结果

6.5 增加一个导航栏

文档:https://butterfly.js.org/posts/4aa8abbe/

同样的修改完后,我们在本地服务器上测试,具体过程就不再重复说了

6.6 侧边栏公告设置

再次参考主题官方文档的说明,我们重新设置网站侧边栏的公告区文本,对应的参数应该是 card_announcement,我们直接修改 content 关键词后面的内容即可

同样的修改完后,我们在本地服务器上测试,具体过程就不再重复说了

好了,其他修改需要依照主题的官网文档

6.7 重新部署到 Gitee Pages

我们现在可以把最后的修改部署到 Gitee Pages 上了

hexo clean

hexo g --d #一键部署

再去手动更新

最新效果如下,如果没有刷新出来,可以尝试刷新页面或者重新打开浏览器进入网页

知识星球双节优惠期间,节后涨价

星球提供的服务:python原创课程、python和vba答疑、原创审计工具、星球定制工具、办公实用神器分享、不定期分享神器会员或者兑换码、vba原创课程(准备中)、赠送积分(用于审计工具箱)等

发表评论

后才能评论