My First Blog: 如何从零创建专属于你的博客？

第一篇主要写建立博客的方法。目前主页还是毛坯房的状态，以后会边写内容边做优化，本篇内容也会持续更新。

Intro

20240719：这是一篇测试博客。当整体优化完成后，将在此处复盘流程经验。

20240722：热烈庆祝编译器配置完成，可以开始写博客了。目前整体还是毛坯房，以后会边写内容边做优化，

手持赫鲁晓夫的玉米

​ 本博客使用Github托管源码，基于Hexo框架搭建，环境Javascript，网页主题Next。

• 附：个人喜欢的博客范例
  • https://liam.page/archives/

Step I Github与Git

​ 基础材料：稳定的VPN、Github账号一枚

• 安装Git：https://git-scm.com/ 建议安装到D盘。

  • 勾选：Git from the command line and also from 3rd-part software
  • 下载完成后打开Git Bash，输入git回车

• 将Git与Github绑定：使用SSH公钥

  • 在D盘新建一个文件夹，命名为git codelife，在此目录下创建一个文件，命名为text。

  • 在text文件夹下打开Git Bash输入ssh命令。随后输入ssh-keygen -t rsa并按下4次回车。随后输入以下命令获取SSH公钥：

    $ cd ~/.ssh 
    $ ls
    $ cat id_rsa.pub

    复制公钥到Github，并Add new ssh key。在Git Bash中输入ssh -T [git@github.com](mailto:git@github.com) 。在产生结果中输入yes，即可绑定成功。

  • 注-提交文件的思路：将Github仓库clone到本地→将文件添加并commit到本地→将本地仓库内容push到Github仓库。

  • 新建一个项目，命名为text，复制SSH。

  • 在git codelife文件夹下打开Git Bash，输入命令

    git clone git@github.com:xxxxxxxxx.github.io.git

  • 此时可以在文件夹内创建一个text.txt测试文件。在此目录下进入Git Bash，输入git status命令查看仓库状态。输入git add text.txt添加到缓冲区，随后输入git commit -m "commit text file。第一次提交会提示”Please tell me who you are”,输入以下内容即可：

    $ git config --global user.name"xxxxxxxxx"
    $ git config --global user.email"xxxxxxxxx@xxxxx.com"

    完成后输入git log查看日志，再输入git status查看仓库状态。随后输入git push origin main将本地仓库提交到远程仓库。第一次上传需要登录github账号。验证成功后刷新仓库即可。

Step II nodejs与hexo

• 安装nodejs：https://nodejs.org/en/

• 设置npm安装全局模块的路径和环境变量

• 安装Hexo

  • 首先在github中创建一个仓库，命名为“你的用户名.github.io”，注意必须是前面必须是github的用户名，否则域名无法解析。创建后设置Github Pages。

  • 在D盘创建文件夹Blog，打开Blog运行Git Bash，输入命令：

    npm install -g hexo-cli

    安装完成后，输入一下命令初始化博客

    hexo init

    随后输入hexo g、输入hexo s，即可在网页中输入http://localhost:4000查看网页。

  • 打开Blog文件夹中的主页配置文件config.yml，在文件底部输入如下内容：

    deploy:
      type: git
      repository: git@github:xxxxxxxxx.github.io.git  #仓库地址
      branch: main

    回到Blog文件夹，打开Git Bash，输入以下命令：

    npm install hexo-deployer-git --save

    然后分别输入以下三条命令行：

    hexo clean
    hexo g
    hexo d

    到这，就可以输入xxxxxxx.github.io浏览网页啦！

Step III 域名的注册与解析

​ 目前域名是冗长的.github.io，不利于辨识，且国内IP不使用VPN无法解析它。而目前国际主流的域名注册商如GoDaddy、Network Solutions提供的域名，也均不能在国内访问。

域名注册

​ 不希望辛苦搭建的博客沦为境外势力，我们需要注册一个国内IP可以访问的域名。阿里云、腾讯云提供的域名不少价格低廉，可以一次买10年，但需要各种实名认证，比较麻烦。咬咬牙，注册了一个腾讯云十年域名。

域名解析与绑定

​ 很多教程说要在cmd ping出网站的ip地址，使用ip地址记录值完成解析。但是ip地址在一段时间后有可能改变，出现网址定向失败的情况。打开腾讯云控制台，点击新手快速解析，选择CNAME记录，在目标域名处输入github page域名，点击确定即可。

​ 随后在hexo项目文件source目录下创建CNAME文件，写入新域名dcblog.site。

​ 回到Github设置-Github Pages Custom domains填写新域名，保存并等待DNS check successful。

​ 即刻访问新地址！

Step IV Themes配置与优化

如何使网站被google和bing收录

生成sitemap

​ 首先安装sitemap生成插件：

npm install hexo-generator-sitemap --save

​ 在站点地图配置文件添加如下内容：

# 自动生成sitemap
sitemap:
	path: sitemap.xml

​ 打开Git Bash输入hexo g，即可在根目录的public文件夹生成sitemap.xml文件。

HTML验证

​ 选择URL prefix，填写域名。注意，域名应和站点配置文件中的URL内容一致。如果其中一个是dclee2024.github.io，另一个是dcblog.site，则无法被收录。

​ 下载HTML验证文件，存放在/themes/next/source，执行hexo clean, hexo g, hexo d，稍等片刻返回谷歌网站站长验证界面点击verify，即可完成验证。

​ 到此为止，仅仅能证明网站是你的，但google还不知道你的网站里有啥，所以我们需要提交sitemap。

sitemap提交

​ 在站长界面点击sitemaps，在Add a new sitemap的输入框内填写sitemap.xml，提交即可。

​

​ 状态显示success后，等待一段时间，尝试google搜索site:dcblog.site，验证是否成功收录。

• Ref：https://suda-liu.github.io/2020/04/07/%E4%B8%80%E6%AC%A1%E6%88%90%E5%8A%9F%E7%9A%84%E4%BD%93%E9%AA%8C-Hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E8%B0%B7%E6%AD%8C%E6%94%B6%E5%BD%95/

• 部署站内搜索功能

  • Ref：https://blog.csdn.net/aoman_hao/article/details/86713171

  建议trigger选择auto而非manual。

在主页配置留言板

• Ref：https://blog.csdn.net/qq_43795348/article/details/105877147?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172190507916800172539647%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=172190507916800172539647&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-105877147-null-null.142^v100^pc_search_result_base8&utm_term=hexo%E5%8D%9A%E5%AE%A2%20%E7%95%99%E8%A8%80%E6%9D%BF&spm=1018.2226.3001.4187

使用个性化图标

• Ref：https://blog.csdn.net/qq_54030999/article/details/123164470

留坑

• 配置中英文转换
• 在about界面配置更多彩的排版
• 给代码块添加高亮

Step V 博客撰写与发布

撰写博客

Markdown语法

​ Markdown语法免去了Word文档调整排版的烦恼，但也不像LaTeX那样门槛略高。结合优质的编译器，也可以实现“所见即所得”的效果。

• 官网语法教程：https://markdown.com.cn/basic-syntax/lists.html

• 特殊输入：数学公式与化学方程式

  next主题内置了mhchem，只需在主题配置文件中将对应命令改为true即可。

  Ref：https://mhchem.github.io/MathJax-mhchem/

  比较苦恼的是markdown语法不支持修改图片大小，只能按照原尺寸显示。

编译器

1. Editor.md: 来自Github大佬Pandao的开源Markdown编译器

​ Download：https://github.com/pandao/editor.md

​ Ref：https://pandao.github.io/editor.md/examples/index.html

​ 备注：需要针对hexo重新封装

2. Typora：所见即所得的Markdown编译器（89 CNY）

​ Ref：https://jgwu.top/blogs/Typora-hexo%E5%8F%91%E5%B8%83%E5%8D%9A%E5%AE%A2/

3. VSCode

发布博客

• 素质三连：clean、generate、deploy

$ hexo clean && hexo g && hexo d

​ hexo博客本质是静态网页，每次内容更新都需将网页重新生成。hexo clean命令清除缓存文件；hexo g是hexo generate的缩写，重新生成新的网页；hexo d是hexo deploy的缩写，将新生成的网页部署到Github仓库中。