手把手教你搭建属于自己的个人博客

HoRain云小助手

于 2024-10-09 10:28:24 发布

阅读量571

点赞数 10

文章标签：建站个人博客

本文链接：https://blog.csdn.net/2401_86544677/article/details/142780126

版权

古人云：工欲善其事必先利其器

我们在开始搭建之前，要准备好本地的环境。

一个好的文本编辑器，如：Vscode，Notepad3...等等‘
Node v14.X版本
git

开始:

1.配置coding仓库

注册完coding账号后，来到项目页，点击创建项目。

然后我们选择项目模板为代码托管和自动化部署。

然后我们要填写一些项目的配置信息。

接下来，我们选择创建代码仓库。

完成创建后，我们会得到一个链接，如下图：

这样子我们的代码仓库就创建完成了，这个代码仓库有什么用处呢。

为后面在Coding部署我们的静态博客作前提准备
存储我们hexo的静态文件

2.配置Hexo

接下来就轮到我们的Hexo博客框架登场了。

Hexo的官方中文首页

来到Hexo的官网，首页是这样子的。

可以看到Hexo依赖Nodejs来生成静态页面，而且文章是支持Md格式的，更重要的是他能够在我们添加修改文章后，一键部署到我们的代码仓库中，实现修改，并且hexo有许多优秀的插件。

第一步，在本地克隆我们之前新建的代码仓库。在你存放代码文件的盘上，新建一个文件夹。然后右键打开git bash。

输入命令并运行：

git clone 你的仓库地址

这里的仓库地址指的是你创建好仓库后，系统给你的链接。

克隆好后，我们的文件夹结构是这样子的。

然后我们在上方的文件夹路径中直接输入cmd，打开cmd，注意：这里打开的cmd是管理员，如果不是管理员可能会出错。

输入命令：

npm install hexo-cli -g

然后输入命令:

hexo init 你博客的名字

成功后，你的文件夹会多出一个文件夹，里面存放的则是Hexo的源文件。

接下来，我们则要安装Hexo的相关依赖，在cmd中输入命令

	cd 文件夹名称这里的文件夹名称就是新出现的文件夹
	npm install

这样子就成功了。

然后还需输入命令，来安装hexo的git插件

npm install --save hexo-deployer-git

如果没有安装该插件我们则不能push文件到coding上。

具体Hexo文件夹各个文件的作用，详细见：建站 | Hexo

接下来，我们来新建一篇文章，打开根目录下的source文件夹，再进入_posts文件，可以看到系统已经为我们初始化好了，一篇文章hello-world.md .

我们新建一个md文件，然后在开始部分，输入我们这篇文章的信息

源代码:

	---
	title: 我的HexoDemo第一篇文章
	date: 2021/10/31 13:29:00
	---



	## 这是我的博客第一篇文章

	这是我的博客第一篇文章，请大家多多支持我！

可以看到文章上方有一些配置信息，title,date，这些是信息用来指定个别文件的变量，也就是指定文章的信息。

具体还有其他配置，详细见: Front-matter | Hexo

接下来，我们需要配置Hexo中一键部署的功能，打开hexo根目录中的config.yml

在最下面的deploy中，按照图中的格式来修改：

注意：这里的repo的链接是你仓库的链接，也即coding仓库的git地址。

最后的最后，把我们Hexo根目录中所有的文件，剪切到上一个文件夹中，也就是目录含有隐藏文件夹.git

然后我们在此文件夹打开cmd，输入命令：

hexo g -d

这个命令是两个命令合在一起，分别是hexo generate和hexo deploy

最后我们的仓库是这样子的。

至此，我们的Hexo的基础配置也结束了。

3.在coding部署博客

首先，在代码仓库页，点击仓库设置。

在访问设置中，把公开源代码勾上。

然后我们点击左边的网站托管

这里我们需要扫码授权腾讯云。

进行实名认证后，点击新建网站，按照图中配置。

网站类型选择：静态网站，节点的话，如果你后面有自定义域名的需要，那么如果节点是在国内的话，那么域名就必须要进行备案，如果节点为香港，那么域名如果是在外国服务商购买的话，就不需要备案，国内服务商购买的话仍需要进行备案。这里我们选择广州节点。

然后，点击确认，网站就会进行部署。

然后等待部署成功。

点击访问后，就可以看到我们的博客了。

同时也能够看到我们之前新建的文章。

4.修改文章或配置后如何重新部署上线

假如我们现在需要对文章进行修改，或者安装新的插件，那么我们在做完一系列操作后，只需要再次执行部署命令Hexo g -d即可重新部署上线。

5.怎么绑定自己的域名

我们首先要在域名服务商购买了域名，而且成功备案后才能够绑定自己的域名，如果你选择的是香港节点，那么可以去国外的域名服务商购买域名，则不需要备案。

我们先点进部署项目

点击自定义域名，然后按照步骤进行绑定。

须知：

绑定自定义域名后，请将域名 DNS 中的 CNAME 记录设置为表格中的地址；自定义域名生效后每次进行部署需要刷新CDN缓存，耗时约 5 分钟。查看帮助文档

申请 SSL 证书需要一定的时间，申请通过后会有短信通知；如果申请失败，可以重新申请；点击证书状态可以查看申请进度。申请通过后请重新部署一次网站。

节点在大陆境内的网站使用自定义域名时需要备案，备案成功后可能会有短暂延迟，延迟最长两天。未备案和备案延迟期内，网站部署可能失败。

6.如何更便捷的编写和修改文章

我们可以使用vscode编辑器，安装以下两个插件。

然后侧边栏就会有一个新增的选项，我们可以在这里快捷地新建文章，而且我们新建文章会初始化基础的文章配置，时间，主题，分类，标签等等。

最后我们快捷键ctrl+shift+p可以快捷地执行hexo g -d命令，快速进行部署上线。

7.Hexo的跨设备同步

在我们日常使用中很有可能，要在多台设备上进行写作，那么我们该怎么保持配置文件的一致呢。

我们在hexo根目录下新建一个.gitignore文件，里面填入如下配置

	.DS_Store
	Thumbs.db
	db.json
	*.log
	node_modules/
	public/
	.deploy*/

然后打开git bash输入命令

	git branch 分支名 /* 新建分支，分支名任意 */
	git checkout 分支名 /* 切换到分支 */
	git add .
	git commit -m "Hexo的源文件"
	git push origin 分支名 /* 这里的分支名对应新建的分支名 */