【最新版】30分钟教你搭建属于自己的个人博客
【最新版】30分钟教你搭建属于自己的个人博客
简介:
- 本教程是以Hexo和Coding pages 为基础,搭建个人的静态博客网站
- Hexo Hexo官网 快速、简洁且高效的博客框架
- Coding CODING - 一站式软件研发管理平台 代码持续集成,持续部署
准备:
古人云: 工欲善其事必先利其器
![装逼表情包 [看你装逼的套路不像是本地人]](https://songtiancloud-1300061766.cos.ap-guangzhou.myqcloud.com/img/202110311240950.gif)
我们在开始搭建之前,要准备好本地的环境。
- 一个好的文本编辑器,如:Vscode,Notepad3...等等‘
- Node v14.X版本
- git
开始:
1.配置coding仓库
注册完coding账号后,来到项目页,点击创建项目。
然后我们选择项目模板为代码托管和自动化部署。
然后我们要填写一些项目的配置信息。
接下来,我们选择创建代码仓库。
完成创建后,我们会得到一个链接,如下图:
这样子我们的代码仓库就创建完成了,这个代码仓库有什么用处呢。
- 为后面在Coding部署我们的静态博客作前提准备
- 存储我们hexo的静态文件
2.配置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.怎么自定义主题
配置 | Hexo 在官网的文档里,我们可以知道Hexo的config.yml里每个配置项的作用,这里我推荐几个主题,分别是Butterfly 安裝文檔(一) | Butterfly和 NexT,Next的中文文档地址:开始使用 - NexT 使用文档,我自己本人用的是Butterfly主题。
6.怎么绑定自己的域名
我们首先要在域名服务商购买了域名,而且成功备案后才能够绑定自己的域名,如果你选择的是香港节点,那么可以去国外的域名服务商购买域名,则不需要备案。
我们先点进部署项目
点击自定义域名,然后按照步骤进行绑定。
须知:
绑定自定义域名后,请将域名 DNS 中的 CNAME 记录设置为表格中的地址;自定义域名生效后每次进行部署需要刷新CDN缓存,耗时约 5 分钟。查看帮助文档
申请 SSL 证书需要一定的时间,申请通过后会有短信通知;如果申请失败,可以重新申请;点击证书状态可以查看申请进度。申请通过后请重新部署一次网站。
节点在大陆境内的网站使用自定义域名时需要备案,备案成功后可能会有短暂延迟,延迟最长两天。未备案和备案延迟期内,网站部署可能失败。
7.如何更便捷的编写和修改文章
我们可以使用vscode编辑器,安装以下两个插件。
然后侧边栏就会有一个新增的选项,我们可以在这里快捷地新建文章,而且我们新建文章会初始化基础的文章配置,时间,主题,分类,标签等等。
最后我们快捷键ctrl+shift+p
可以快捷地执行hexo g -d
命令,快速进行部署上线。
8.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 分支名 /* 这里的分支名对应新建的分支名 */
然后我们就可以在代码仓库中看见新的分支,新的分支里正是我们的Hexo源文件。
以后我们在某一台设备上新建修改了文章或者安装了新的插件后,我们就执行如下命令即可.
git add . git commit -m "信息" git push origin 存放源文件的分支名
即可把文件同步上去。
我们还可以把默认分支改为Hexo源文件分支,把静态文件master分支隐藏掉。
这样子我们只要在新的设备上克隆仓库,执行npm install
后即可完成同步。
结尾:
最后看一下,butterfly主题美化后的博客效果。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~