Hexo个人博客搭建及上线全流程

Hexo是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用现有的主题生成静态网页。

前置条件: 需要您的机器上安装好GitNode.js

准备工作

注:前两步可以直接看官方文档:hexo安装部署

1. hexo建站
  • 在终端执行以下命令来安装 Hexo:

    1
    npm install hexo-cli -g
  • 选择一个目录来存放你的博客文件,并在该目录下初始化 Hexo:

    1
    2
    3
    hexo init myblog
    cd myblog
    npm install
  • 在项目根目录下执行以下命令来生成静态文件并启动本地服务器:

    1
    2
    3
    hexo clean # 清除缓存文件
    hexo g # 生成静态文件
    hexo s # 启动本地服务器

​ 随后可以打开浏览器访问 http://localhost:4000/,如果看到博客页面,说明本地搭建成功。

  • 如果您觉得官方的主题不够美观,你可以从 Hexo 主题官网 下载并安装你喜欢的主题:

    1
    npm install --save hexo-theme-name

    然后在 _config.yml文件中指定对应的主题即可:

    1
    2
    theme: hexo-theme-name
    language: zh-CN
2. hexo部署
  • 创建 GitHub 仓库:登录 GitHub,新建一个仓库,名称为git用户名.github.io

  • 配置部署信息:在 _config.yml 文件中添加以下内容:

    1
    2
    3
    4
    deploy:
    type: git
    repo: git@github.com:git用户名/git用户名.github.io.git
    branch: main
  • 安装部署插件

    1
    npm install hexo-deployer-git --save
  • 执行部署命令

    1
    hexo clean && hexo g && hexo d # 清除缓存、生成静态文件并部署到 GitHub Pages

    完成后,你可以通过 git用户名.github.io 来访问你的博客

3. 域名映射
  • 购买域名:可以根据自己的喜好选择不同的渠道进去购买,因为阿里云比较省心,所以我比较喜欢用阿里云,下面是阿里云的购买链接:阿里云域名

  • DNS解析:登录到您的域名注册商控制台,找到域名管理并进入解析页面,添加一条记录,下面是我的配置参考:

    阿里云DNS解析地址

  • 配置Hexo:在Hexo博客的source文件夹下创建一个名为CNAME的文件,内容为您的自定义域名:

    1
    example.com
  • 配置GitHub仓库:进入GitHub仓库的设置页面,在GitHub Pages部分找到Custom domain,输入您的自定义域名并保存:

    git仓库配置

    完成以上步骤后,等待几分钟,Hexo博客就可以通过自定义域名访问了。

4. SSL证书购买与部署:
  • 证书购买:和域名一样,大家根据自己的喜好选择运营商购买SSL证书即可,阿里云地址为:阿里云SSL证书管理

    阿里云证书购买

    如果预算不够的话,也可以点击图片中的个人测试证书,可以免费购买3个月的

  • 证书部署:

    (1)创建证书:购买证书之后需要在证书管理页面创建证书

    创建证书

    (2)申请证书:创建完证书之后需要提交申请

    申请证书

    证书申请通过之后证书的状态会变成已签发,此时证书申请完成。

    (3)网站协议切换成Https:还是github仓库的设置界面,把Enforce HTTPS勾上即可

    网站协议转换

至此,个人博客的搭建和部署结束,我们可以通过访问 https://博客域名访问我们的博客啦!

网站验证

当我们部署完我们的网站之后,我们虽然可以直接通过url访问我们的网站,但是我们无法通过搜索引擎检索到我们网站的相关内容,所以我们需要进行网站验证,网站验证主要就是为了让各大搜索引擎搜录我们的网站,这样可以让更多的人通过搜索引擎找到我们的网站。下面我将分享百度、谷歌、Bing三个常见搜索引擎的网站验证教程。

1. 百度:

(1): 首先我们需要访问百度搜索资源平台并进行登陆。

(2): 进入到用户中心的站点管理中,然后点击添加网站

添加网站

(3): 在第三步:验证网站中,我们需要选择HTML标签验证,然后找到hexo项目中的head.pug文件一般路径为:./themes/当前应用主题/layout/includes/head.pug, ./表示当前的hexo项目根目录,如果找不到在hexo项目中全局搜索即可。

找到之后我们在文件的最下面添加如下内容即可,谷歌和Bing也是相同的配置,后续不再赘述:

1
2
// 百度的html标记
meta(name="baidu-site-verification" content="codeva-vxWGXRA3Ih")

(4): 由于百度网页爬虫抓取网站需要时间,因此我们可以手动把我们的网页手动提交到百度搜索引擎中进行搜录:

网站搜录

当我们成功提交之后,只需等待一些时间即可在搜索引擎中检索的我们网站中的相关内容。

2. 谷歌:

访问Google Search Console,使用Google账号登录后并选择第二个选项输入自己的网址即可

google search console

作者这里因为输入的是https的网址验证直接通过了,如果大家还需要验证的话,选择验证方式为HTML标记,然后和百度的验证方式一致即可,在head.pug文件中添加google的html标记:

1
2
// 谷歌的html标记
meta(name="google-site-verification" content="填入相应码")

最后进去google search console管理页面,可以看到需要有一天的时间准备数据:
console

3. Bing:

访问必应网站管理员工具,随后点击开始使用Google账户仅进行登陆

必应网站管理员工具

然后选择添加网站时,我们可以选择从Google Search Console中导入,此时我们就可以便捷地把网站信息收录到Bing搜索引擎中了。

至此,关于Hexo个人博客搭建及上线全流程的内容已经全部结束了,希望我的以上内容可以给你一些帮助,如果你有疑问的话可以在评论区留言,或者给我发电子邮件,我看到后会及时解答,我们下个文章见😁。