当前位置:   article > 正文

Hexo + Gitee 搭建个人博客

gitee 自定义域名



文章来源:一直学高阶摸鱼术

作者:离不开的网

网址: https://www.cnblogs.com/yizhixue-hx/

环境搭建

  • Git

  • Node.js

    • 最新的 Node.js 已经集成了 npm

  • npm

官网地址:

  • https://nodejs.org/en/

  • https://git-scm.com/

开始搭建

1. 安装 Hexo

  1. npm install -g hexo   # 通过npm安装hexo
  2. # -g 指定全局安装,可以使用hexo命令

2. 初始化 Hexo

  1. hexo init blog  # 初始化创建,会再桌面创建blog文件夹
  2. cd blog    # 进入blog目录
  3. npm install   # 进一步安装hexo所需文件

初始化后,文件夹的目录如下:

  1. .
  2. ├── .deploy       #需要部署的文件
  3. ├── node_modules  #Hexo插件
  4. ├── public        #生成的静态网页文件
  5. ├── scaffolds     #模板
  6. ├── source        #博客正文和其他源文件等都应该放在这里
  7. |   ├── _drafts   #草稿
  8. |   └── _posts    #文章
  9. ├── themes        #主题
  10. ├── _config.yml   #全局配置文件
  11. └── package.json

3. 启动 Hexo

  1. hexo clean   # 清除所有记录 /hexo c
  2. hexo generate  # 生成静态网页 /hexo g
  3. hexo server    # 启动服务 /hexo s

显示如下图,则运行成功。

然后使用浏览器访问 http://localhost:4000

其实,如果你要求不高,我们再把它部署到码云(gitee)上,现在也可以说是完成了。

4. 把博客部署到码云上

首先说明一下,为什么选择码云,因为我也是通过 GitHub Page 实现的,不过最近 GitHub 经常性蹦,访问也比较慢,所以我就选择了码云实现一下,当然你有服务器就最好不过了

码云(gitee):https://gitee.com/

4.1 注册码云,创建仓库

我们需要在 gitee 创建自己的账户(如果没有),然后再创建一个自己仓库

输入仓库名称,其它默认即可,这里因为我已经创建了

4.2 生成/添加 SSH 公钥

码云 Gitee 、GitHub 提供了基于 SSH 协议的 Git 服务,在使用 SSH 协议访问仓库仓库之前,需要先配置好账户/仓库的 SSH 公钥。

配置 ssh 账户和邮箱

邮箱不必与 GitHub、Gitee 账号相同,个人邮箱即可。

  1. git config --global user.email *********@qq.com # 设置邮箱
  2. git config --global user.name '****'   # 设置用户名

查看账户和邮箱

  1. git config --global user.name 
  2. git config --global user.email

本地生成ssh公钥

邮箱为刚配置好的账户邮箱

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

按照提示完成三次回车,即可生成 ssh key

查看 ssh 公钥

  1. vim ~/.ssh/id_rsa.pub
  2. # 退出
  3. :qa!

复制公钥去 Gitee 粘贴,添加

说明一下:

  • GitHub、gitlab、码云三个平台可以使用一个公钥

测试是否连接成功

码云 Gitee

ssh -T git@gitee.com

如下图所示,则表示连接成功

另外, GitHub 的测试代码如下:

  1. ssh -T git@github.com
  2.   
  3. # 表示连接成功
  4. Hi “您的用户名”! You've successfully authenticated, but GitHub does not provide shell access.
4.3 配置连接 Gitee

进入到我们新创建的仓库,复制项目地址

复制 URL ,到 hexo 的配置文件 _config.yml,相应位置修改成如下:

  1. deploy:
  2.   type: git                        # type为git
  3.   repo: git@gitee.com:XXXXXX/blog.git  # 仓库的 URL
  4.   branch: master

注意:冒号后面一定要有空格,否则不能正确识别。

4.4 部署博客

安装自动部署发布工具,不然部署会报错

npm install hexo-deployer-git --save

新建 deployer.sh 文件,输入代码:

  1. hexo clean
  2. hexo g 
  3. hexo d

一键部署博客

sh deployer.sh

5. Gitee Pages 设置

在项目的服务中选择 Pages 选项

默认配置,点击启动即可

下图则成功开启,记住博客地址,之后可以点更新进行操作

博客发布成功之后,可以访问博客地址:xxxxxx,就可通过他提供的博客地址进行访问,预览在线博客啦!!

如果博客的样式不对,则需要在_config.yml中配置下博客地址和路径:

  1. url: “码云提供给您的博客地址”
  2. root: /

再执行命令 sh deployer.sh 就可以啦,之后就是美化我们的博客了。

6. 主题配置

下载自己喜欢的主题,可以去 github 下载压缩包然后放到博客项目根目录下的 themes 中

然后配置 _config.yml

  1. theme: “您的主题文件夹完整名称”  
  2. # 这里需要注意:后面要有一个空格,名称要和theme下的主题目录名称相同。

修改完成,本地运行 hexo s 测试成功即可上传部署到 Gitee 然后点击更新即可。

7. 自定义域名

经过上面操作,我们用 Hexo 搭建好自己的 Blog 后,我选择了托管在码云上,现在通过 https://xx0817.gitee.io/blog 这个地址就可以访问了。但是我想通过自己的域名进行访问,要实现这个功能。

7.1 购买域名

这里不多说,某里云、某讯云、某为云都可以,看自己喜欢。

7.2 域名解析

我们需要通过 GitHub 网址 ping 出服务器的 IP 地址。可以在本地 cmd 中 ping。也可以在网站上 ping。

我选择网站 ping。

网站:http://ip.tool.chinaz.com/

访问后输入自己的 GitHub 部署的博客网址就能 ping 出来了。

进入域名购买的控制台,在解析中添加记录:

添加记录:

主机记录为@,记录类型为A,解析线路选择默认,记录值设置为上面ping出来的IP地址。最少要设置一个,我是四个全部设置了。

再添加记录:

主机记录为www,记录类型为 CNAME,解析线路选择默认,记录值为你的 GitHub 域名,我的为 gdfuturexx.github.io。

上面设置的意思为:

  • 设置 A 记录的意思是,当我输入 hongxin.online 这个域名的时候,访问的是 185.199.110.153等这4个IP地址其中一个;

  • 设置 CNAME 的意思是,当我访问 gdfuturexx.github.io 这个地址的时候,会跳转到 hongxin.online,之后的过程就和 A 记录相同了,即访问 185.199.110.153等4个IP地址其中一个。

7.3 添加CNAME文件

在Hexo本地文件夹的source文件夹中,增加一个名为CNAME的无后缀文件。

如果你想地址栏中显示www就输入www.xxx.com,否则输入xxxx.com(你的域名)就行。

之后重新部署即可。

7.4 GitHub Pages 绑定域名

登录你的GitHub,进入仓库,打开设置。

找到下图位置,在 Custom domain 添加你的自定义域名。

之后刷新一下页面,如果 能勾选Enforce HTTPS就要勾选上。如果不勾选的话访问域名会显示不安全。

自定义域名这段参考了:sushan102.top,这个网站中的文章

如果你觉得文章不错的话,分享、收藏、在看、留言666是对老表的最大支持。

老表Pro已经满了

所以大家加老表Max吧

每日留言

说说你最近遇到的一个编程问题?

或者新学的一个小技巧?

(字数不少于15字)

留言赠书


完整Python基础知识要点

Python小知识 | 这些技能你不会?(一)

Python小知识 | 这些技能你不会?(二)

Python小知识 | 这些技能你不会?(三)

Python小知识 | 这些技能你不会?(四)

近期推荐阅读:

【1】整理了我开始分享学习笔记到现在超过250篇优质文章,涵盖数据分析、爬虫、机器学习等方面,别再说不知道该从哪开始,实战哪里找了

【2】【终篇】Pandas中文官方文档:基础用法6(含1-5)

好文章,我在看❤️

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/68462
推荐阅读
相关标签
  

闽ICP备14008679号