您的位置: 首页  >  文章  >  hexo + gitee pages 搭建个人博客

hexo + gitee pages 搭建个人博客

分类: 文章 • 2023-11-14 20:19:10

前言

工作也有**年了,遇到问题google,*,再加上blog基本上就都解决了。我们感觉解决问题如此简单，是因为有许许多多的开发者做着无私的分享。我们也应该把自己的经验，遇到问题的解决办法分享出来，促进这个圈子的良性循环。现在现成的博客站点各种广告，烦~，所以我们搭建自己可定制的私人免费博客。

一、简介

Hexo

是一个基于node.js开发的开源的静态博客框架，使用Markdown或者其他渲染引擎解析文章，可以在几秒内使用靓丽的主题生成静态网页。没错，我们使用的就是它。

Github

这个就不用介绍了吧，找开源项目经常逛的就是它了吧。

Github Pages /Gitee Pages

Github Pages 是一种静态站点托管服务，旨在直接从GitHub存储库托管您的个人，组织或项目页面。

Gitee Pages 与github pages 功能一样。如果您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前Gitee Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

二、安装

安装 Hexo 比较简单。但是在安装前，需要先安装下边两个应用程序：

Node.js

安装 Node.js 的最佳方式是使用 nvm或直接点击上边链接下载安装程序安装(版本要求6.0以上)。
我的ubuntu node.js 版本如下:

[email protected]:~$ node -v
v9.10.0
[email protected]:~$

在终端中使用下边命令安装:
cURL:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

or Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

Git

Linux (Ubuntu, Debian)：

sudo apt-get install git-core

我使用的是ubuntu ，其他操作系统自行google，比较简单。

Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

[email protected]:~$ npm install -g hexo-cli
/home/chenfr/.nvm/versions/node/v9.10.0/bin/hexo -> /home/chenfr/.nvm/versions/node/v9.10.0/lib/node_modules/hexo-cli/bin/hexo

至此，所有安装已经完成。

三、建站

安装 Hexo 完成后，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder> 
$ cd <folder>
$ npm install

下边是我的执行过程

[email protected]:~$ hexo init testBlog
INFO  Cloning hexo-starter to ~/testBlog
正克隆到 '/home/chenfr/testBlog'...

[email protected]:~$ cd testBlog/
[email protected]:~/testBlog$ ls
_config.yml  node_modules  package.json  package-lock.json  scaffolds  source  themes

文件夹的目录如下：

.
├── _config.yml(网站的配置信息，可以在此配置大部分的参数)
├── package.json(应用程序的信息)
├── scaffolds(模版 文件夹。新建文章时，Hexo 会根据 scaffold 来建立文件。)
├── source(存放用户资源)
|   ├── _drafts
|   └── _posts
└── themes(主题 文件夹。Hexo 根据配置主题来生成静态页面。)

然后在该目录下分别执行如下命令来生成一个静态网页

[email protected]:~/testBlog$ hexo generate
INFO  Start processing
INFO  Files loaded in 166 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
......

再执行下边命令开启本地服务来预览网页,资源文件夹下有一篇默认的hello world.md 的文章

[email protected]:~/testBlog$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

在浏览器中就可以看见我们的博客了,大致下边这个样子

hexo + gitee pages 搭建个人博客

上边两条命令可以简写成 hexo g 和 hexo s

四、 配置Github

绑定Git & Github

在终端中做如下配置:

Github用户名:
git config --global user.name “your_username”

注册Github的邮箱:
git config --global user.email "[email protected]"

然后去博客建立一个专门放博客的仓库，注意事项如下:

hexo + gitee pages 搭建个人博客

仓库建立完成后,根据下边步骤建立git与github的安全连接

配置SSH Key

首先查看本地是否已经有SSH Key, 终端输入如下命令：
cd ~/.ssh;ls

如果存在id_ras.pub，说明已经有SSH Key，否则需要重新创建。
我的已经创建过了,如下

[email protected]:~$ cd ~/.ssh
[email protected]:~/.ssh$ ls
id_rsa  id_rsa.pub  known_hosts  known_hosts.old

使用如下命令生成**
ssh-****** -t rsa -C "[email protected]"

按提示分别输入Key文件保存路径和密码(可以为空)，完成会有如下提示即表示创建成功

The key fingerprint is:
01:0a:f6:3c:ca:95:d…:db [email protected]

然后将SSH Key添加到ssh-agent:

eval “$(ssh-agent -s)”
ssh-add ~/.ssh/id_rsa

添加SSH Key到Github账户

复制当前用户根目录.ssh文件夹下的id_rsa.pub文件内容,添加到github 设置中的SSH keys选项下,大致如下图

hexo + gitee pages 搭建个人博客

添加完成后就可以测试ssh连接了,命令如下

ssh -T [email protected]

会出来几行提示,大致意思是你当前主机还没有建立安全连接,然后是秘钥指纹,问你是否继续连接,点击yes(因为我的已经点击过了,所以没有提示),完了后会出现如下提示,说明建立ok了

[email protected]:~$ ssh -T [email protected]
Hi booyoungchen! You've successfully authenticated, but GitHub does not provide shell access.

五、关联Hexo 和 Github

配置Hexo

进入上边你自己创建的博客根目录,打开目录 配置文件,修改参考下边

#https://github.com/booyoungchen/booyoungchen.github.io.git
#注意:上一行中booyoungchen两个必须一样,为github的用户名,并且每个冒号后边都有空格
#repo:为部署到的pages地址(原先部署在github pages上，现在改为码云)
deploy:
  type: git
#repo: [email protected]:booyoungchen/booyoungchen.github.io.git
  repo: https://gitee.com/booyoung/blog.git
  branch: master

可以看到我的改为了码云(gitee 仓库),因为github在国内访问特别慢,原理都一样,这个我后边会提到,先按照上边配置(尤其注意注意中的提示,不然网页不会显示)

安装Hexo git插件

npm install hexo-deployer-git --save

[email protected]:~/testBlog$ npm install hexo-deployer-git --save 
npm WARN deprecated [email protected]: This package is no longer maintained
......
+ [email protected]
added 31 packages in 8.784s

出现以上提示说明安装成功。

将博客部署到Github

hexo deploy

以上命令可以简写成 hexo d

现在就可以使用http://booyoungchen.github.io来访问网站了，结果如下：

hexo + gitee pages 搭建个人博客

六、Hexo常用命令

  • 新建文章
hexo new [template] "Title"  //新建标题为Title的文章

template是可选参数，就是指定文章模板，默认值为post。在scaffolds路径下，你可以新建或编辑现有模板。
执行命令后，在source/_posts/下会生成Title.md文件，该文件就是我们要编辑的博客文件。

  • 新建页面
hexo generate  或者hexo  g    //生成静态页面至public目录
  • 本地预览
hexo server    或者 hexo  s    //启动本地服务
  • 部署到Github
hexo deploy    或者 hexo  d
  • 清理已经生成的静态文件
hexo clean   //清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

七、修改主题

我比较喜欢 yilia 主题，如果有需要其他的自行查找。

主题下载完成后，将主题放在themes文件夹下，同时将博客根目录_config.yml文件中的theme改为yilia

现在就可以启动本地服务来预览我们的新主题了。

由于yilia在github上已经给出如何配置，且比较详细，在此我就说下设置过程中可能会遇到的问题。

  1. 如果将文章中或者网站头像使用到的图片放在另一个仓库时，必须将/…/master前边文件夹名称改为raw,不然图片不显示

例如：#avatar: https://github.com/booyoungchen/blogimages/raw/master/blog/avatar.png

  1. 文章文字截断 (文章预览是只显示截断部分而不是全部显示)

设置根目录主配置文件_config.yml中 excerpt_link: more

在文章中需要截断的文本后边加<!-- more -->即可。

八、迁移到码云

码云被称为国内版的github，访问速度比github快许多。

没有账号的话先****云支持将github仓库同步到码云仓库，使用步骤与github一样。
账号创建完成后，将github上的仓库同步到码云，
hexo + gitee pages 搭建个人博客

同步完成后，仓库就创建好了，点击仓库选项卡里的服务，找到gitee pages，配置gitee pages 服务，

hexo + gitee pages 搭建个人博客
点击创建，
hexo + gitee pages 搭建个人博客

将仓库部署到gitee pages，完成如下,
hexo + gitee pages 搭建个人博客

复制页面网站地址，然后配置本地博客根目录文件repo为repo: https://gitee.com/booyoung/blog.git
好了，你的代码仓库已经成功迁移到码云。

九、配置域名

github可以配置，码云没去研究（因为我的域名没实名认证，无法解析成功，有需要的可以研究下，这里配置的是github）。

使用阿里云的域名，使用其他服务商的域名配置也差不多。

登录阿里云，在控制面板选项卡中找到域名打开，其中就是你购买的域名，没买过的可以先购买，如下：

hexo + gitee pages 搭建个人博客

点击解析域名，

hexo + gitee pages 搭建个人博客
A指向ipv4地址，CNAME指向另一个域名。解析时尽量不要使用ip，有时侯会变。
解析完成后在博客根目录创建一个名为CNAME的文件，将你购买的域名写入文件，例如我的是booyoung.top ,注意不要带前缀。然后进入github仓库，设置里边有 Custom domain，将booyoung.top填入应该就ok了。

hexo + gitee pages 搭建个人博客

我域名没实名，所以没测试，如果方法有问题，欢迎给我留言。

十、其他

修改代码块的背景色和字体大小(主题默认代码块字体有点儿小) :

themes\yilia\source\main.0cf68a.css

搜索 : .article-entry .highlight,对应背景和字体颜色，修改成你想要的即可

添加访问量和访客数 ：themes/yilia/layout/_partial/footer.ejs

<div calss="count-span">
	<span id="busuanzi_container_site_pv">
		本站访问量: <span id="busuanzi_value_site_pv"></span>次 
	</span>
	<span id="busuanzi_container_site_uv">
		访客数: <span id="busuanzi_value_site_uv"></span>人
	</span>
</div>

完整配置如下：

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>

<div calss="count-span">
	<span id="busuanzi_container_site_pv">
		本站访问量: <span id="busuanzi_value_site_pv"></span>次 
	</span>
	<span id="busuanzi_container_site_uv">
		访客数: <span id="busuanzi_value_site_uv"></span>人
	</span>
</div>
  </div>
</footer>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

阅读量：
http://www.janszeng.top/2017/08/30/hexo_yilia_count/

好了，博客基础框架已经搭建完成，开启你的博客之旅吧！

参考：
不蒜子
使用Hexo＋Github Pages 来搭建免费的专属博客

​

相关推荐