How far is forever
基于Windows11+Hexo+Gitee+Typora +PicGo搭建免费个人博客
Project
基于Windows11+Hexo+Gitee+Typora +PicGo搭建免费个人博客
Project

基于Windows11+Hexo+Gitee+Typora +PicGo搭建免费个人博客

内容目录

How

一、方案介绍

常见的博客搭建除了各大博客平台以及Wordpress一站式建站，更多的是以Hexo框架为代表的，以静态页面部署在Gitee 、Github等代码托管平台，使用其Pages服务的形式。本文以Hexo框架和Gitee为平台，进行个人博客搭建。至于Github，因访问速度的问题，使用体验并不好，即使用其他手段进行处理，也是一件较为复杂的事，为何不使用Gitee呢！

至于操作系统Windows11则是通过VMware创建的虚拟机，尝鲜，并且可以规避TPM2.0的限制。虽然是Beat版本，仍可以明显感受到响应速度的提升和界面、文件管理的优化整合。虽然很期待，但实体生产环境还是应保持Windows10稳定。整套操作都是在虚拟机上完成，私钥、公钥、IP并不受通信走实体机而保持一致的影响。

本套博客搭建方案，不受操作系统版本兼容性的影响。

  • 安装需要使用的软件、搭建环境，注册需要使用的web网站；
  • 在个人计算机本地新建一个文件夹用于存放该博客的全部文件和代码；
  • 拉取Hexo博客框架到本地并进行部署；
  • 生成SSH-Key，并连通Gitee，开启Pages服务；
  • 使用Typora编辑器以Markdown标记语言进行博客写作；
  • Typora需结合PicGo对图片进行推送回写管理；
  • LeanCloud对博客的评论进行存储管理；
  • 更换博客主题，并进行自定义；
  • 全过程中VSCode作为代码编辑器、Git作为版本控制工具。

二、资源下载

上述资源中，除了Hexo框架需要进行拉取，Gitee/Github、LeanCloud只需通过链接访问Web页面即可，其余资源(以Windows-x64为例)通过下述网盘链接即可获取，其他操作环境请依据链接自行下载。
链接：https://pan.baidu.com/s/1DiC_TklhnorlNvE-6DaSqw 提取码：8hth

三、环境搭建

Git、VSCode、Node、Typora、PicGo都是.exe文件，点击“下一步”默认安装即可。安装完成后，Win+R打开运行命令框，输入wt.exe打开PowerShell命令窗口，输入以下代码。

 git --version
 node --version
 npm --version

此代码本意为检查程序版本，当程序有版本区别的时候也就意味着已经安装成功。npm是javascript的包管理工具,是和Node.js一起发布的，只要安装了Node.js，npm也安装好了。

四、Hexo框架部署

在本地新建一个文件夹【Blog】用于存储博客相关的代码和文件，在这个文件夹内右键单击，点击Git Bash Here，依次输入代码框中的代码对Hexo框架进行部署。

# Hexo框架拉取
$ npm install -g hexo
# Hexo框架载入本地
$ hexo init
# 部署Hexo推送服务在本地
$ npm install hexo-deployer-git --save

五、SSH-Key生成

# 设置user.name和user.email并进行确认
$ git config --global user.name "root"
$ git config --global user.name
$ git config --global user.email "theflowerriver@outlook.com"
$ git config --global user.emai
# 单个SSH-Key生成
$ ssh-keygen -t rsa -C "theflowerriver.outloook.com"
# 多个SSH-Key生成
# 生成一个公司用的SSH-Key密钥
$ ssh-keygen -t rsa -C 'xxxxx@company.com' -f ~/.ssh/company_id_rsa
# 生成一个Github用的SSH-Key密钥
$ ssh-keygen -t rsa -C 'xxxxxxx@qq.com' -f ~/.ssh/github_id_rsa
# 生成一个Gitee用的SSH-Key密钥
$ ssh-keygen -t rsa -C 'xxxxxxxx@163.com' -f ~/.ssh/gitee_id_rsa

生成的SSH-Key默认保存在C:\用户\xxxx.ssh\id_rsa.pub路径下，使用记事本打开文档，Crtl+A全部复制，将复制的Key粘贴在已注册的Gitee设置中新建的SSH公钥下，SSH公钥添加成功。

新建一个与Gitee账号名称相同的开源仓库，作为本地文件和代码的存储仓库，开启该仓库的Gitee Pages服务，此时访问网站地址：https://仓库名称.gitee.io是not found的。

通过VSCode编辑器打开【Blog】文件夹中的_config.yml文件，修改Deployment项如下，其中repository是仓库的SSH地址。

type: git   
repository: git@gitee.com:TanDelai/TanDelai.git
branch: master
# 输入下述代码，确认账户通过认证，本地和仓库成功连通。
$ ssh git@gitee.com
# 输入下述代码，清除缓存重新加载。
$ hexo clean
$ hexo generate
# 输入下述代码，启动本地服务localhost:8000，确认修改是否生效。
$ hexo server
# 输入下述代码，将本地代码和文件推送到仓库。
$ hexo deployed
在Gitee Pages服务下更新代码或重新部署，此时访问网站地址：https://仓库名称.gitee.io将成功访问。

六、更换主题

如果想要换掉默认的博客主题，则需要在Hexo框架网页找到主题一栏，预览，选中自己想要的主题，找到其对应的GitHub地址，在【Blog】->【themes】文件中右键Git Bash Here。输入下述代码，将对应的主题拉取到本地主题管理文件夹下。

$ hexo clone https://github.com/ppoffice/hexo-theme-hueman

用VSCode打开【Blog】文件夹中的_config.yml文件，修改theme项为目标主题的名称，即hexo-theme-hueman，Crtl+S保存修改，走一遍推送流程，在本地确认已修改的情况下，推送到仓库，更新网站部署。

七、图床搭建

Hexo框架下默认有一篇博客HelloWorld，如果想要写自己的第一篇博客，需要新建一个.md文件在【source】->【_posts】路径下，可以通过下述代码实现，其中new之后部分为文件名称。

$ hexo new gir

新建完成后，可以找到此文件进行内容编辑，由于编辑器Typora无法像Word一样存储图片，需要结合PicGo使用其图片上传管理功能，将图片上传至Gitee/Github等图床进行存储，将生成的开源链接回写至Typora，将文件推送至仓库时，实际上保存的是该图的公网链接，而网站页面只需通过公网链接去请求加载该图即可，这也就是图床仓库需必须开源的原因。

首先，需要在Gitee新建一个用于存储图片的仓库，开源并启动该仓库的Gitee Pages服务。另外，在设置中新生成一个私人令牌。

其次，打开PicGo，在插件设置项搜索gitee-uploader并安装，安装成功后需进行配置。在图床设置中找到gitee（当然使用其他的图床服务亦可，这里默认为Gitee方便统一管理），repo项填写的是Gitee图床的仓库地址（账号名称/仓库名称）；branch分支默认为master；token就是刚生成的Gitee私人令牌，path为路径，非必填。确认设置并设为默认图床。

最后，打开Typora，在偏好设置中的图像中进行配置，使用其自带的PicGo（app）上传服务，路径为PicGo.exe的绝对路径。完成后点击【验证图片上传选项】，验证成功的同时，PicGo和Gitee的仓库都有了对应的照片。此时，回到Typora编辑器，重新粘贴一张照片或右键点击已有的照片，选择上传图片，upload结束后PicGo和Gitee存入该照片，Typora同步回写了该图片的公网地址。将该文章更新推送后，个人博客网站成功加载图片。

八、后续

PicGo+Gitee作为图床，上传图片大于1M时需要登录方可查看，上传成功但无法在PicGo中查看和网页上正常显示。目前的解决方案有：

1、压缩照片：https://www.iloveimg.com/zh-cn；

2、更换Gitee为其他图床；

3、更换上传工具：https://www.iloveimg.com/zh-cn。

注：博客主题的自定义及评论系统中评论内容的保存等相关内容将在后续介绍。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注