Hexo进阶

Hexo进阶

  • 关于Hexo如何制作博客主页详见这里

现象描述

​ 按照hexo+github pages的博客搭建部署流程,hexo的博客主页会部署在https://yourgithubname.github.io/。本来没什么问题的,但是后面我想做一个个人主页(学术主页),按照academicpages/academicpages.github.io或者RayeRen/acad-homepage.github.io的方案,使用的也是https://yourgithubname.github.io/。这时候就有问题了,博客和个人主页的域名不就冲突了?

  • 我的目的是实现下面功能的东西。

从yourgithubname.github.io进入,访问的是我的个人主页。通过个人主页可以跳转到博客、建立页面。

从yourgithubname.github.io/blogs进入,访问的是我的博客,就是用hexo搭建好的。

从yourgithubname.github.io/resume进入,访问的就是我的一个个人简历。

  • 本人菜鸡,完全不懂前端。尝试了几种不同的方案,包括切换repo分支的谜之操作,都试了,都不行。最后发现原来是对Hexo进行部署了解的不够细致。

Hexo部署过程

​ 按照之前介绍Hexo搭建个人博客中的流程做好如下设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yourgithubname.github.io # 注意这里的url就是能够通过外网访问的博客主页链接,也就是Hexo将博客主页的内容放在了这个对应的同名仓库
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

...
...

deploy:
type: git
repo: git@github.com:yourgithubname/yourgithubname.github.io.git
branch: master

​ 然后执行hexo d,这样通过上面的url:http://yourgithubname.github.io就可以看到部署好的博客页面了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Mode                 LastWriteTime         Length Name
---- ------------- ------ ----
d----- 2023-02-25 上午 11:45 .deploy_git
d----- 2023-02-06 上午 11:48 node_modules
d----- 2023-02-25 上午 11:44 public
d----- 2023-02-01 上午 11:08 scaffolds
d----- 2023-02-25 上午 09:24 source
d----- 2020-02-23 下午 04:10 themes
-a---- 2020-02-23 下午 03:24 71 .gitignore
-a---- 2023-02-25 上午 11:44 951152 db.json
-a---- 2023-02-06 上午 11:48 138563 package-lock.json
-a---- 2023-02-06 上午 11:48 678 package.json
-a---- 2023-02-25 上午 11:56 203 README.md
-a---- 2023-02-25 上午 11:44 3532 _config.yml
  • 同时我在这个路径下初始化一个私有的仓库Blog,利用git管理这些写好的文件,防止丢失。也方便在不同的电脑端进行再次搭建。私有Blog仓库不会被别人访问到。别人只能看到yourgithubname.github.io这个仓库中的内容,但是这里面是经过处理的内容,无法逆向解析,我做不到。。。

Github Pages

GitHub Pages是GitHub提供的一个网页寄存服务,于2008年推出。可以用于存放静态网页,包括博客、项目文档甚至整本书。Jekyll软件可以用于将文档转换成静态网页,该软件提供了将网页上传到GitHub Pages的功能。一般GitHub Pages的网站使用github.io的子域名,但是用户也可以使用第三方域名

​ 按照Hexo博客部署的教程,我之前相当于开了一个yourgithubname.github.io的公有仓库,通过Pages的设置中的Build and deployment中激活了yourgithubname.github.io这个github上的次级域名。这个域名外网可以访问到。

​ 那么部署是在做什么呢:简单来说就是在本地构建一个静态网页,然后发到特定的域名的过程。比如这里Hexo搭建的时候,通过Node.js帮我们搞了很多事情,利用Hexo提供的模板做了静态网页,然后用github pages蹭了一个域名,通过Hexo将网页信息部署到了https://yourgithubname.github.io主页的过程。部署时的内容生成到了yourgithubname.github.io这个仓库。(别人只能访问Hexo部署之后生成的文件)

  • 理论上来说可以在github构建无限的公有仓库,都设置次级域名,都可以通过xxx访问了。

解决方案

  1. 新建一个blogs公开仓库(私有是不行的,和yourgithubname.github.io仓库同理),在仓库Settings中找到Pages,在Build and deployment中的Branch上设置main分支,/root路径,然后save。(中间可能会等一会,github pages响应一下)会发现在上方的GitHub Pages处,已经显示Your site is live at https://yourgithubname.github.io/blogs/了。(激活了新的次次级域名)
  2. 然后在Hexo的根目录下的_config.yml设置url和root如下:(调整网站部署的域名地址)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://whu-lyh.github.io/blogs # 这个域名是新的已经更新的博客的主页地址,与blogs仓库同名
root: /blogs # 这里按照要求也要修改
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

...
...

deploy:
type: git
repo: git@github.com:whu-lyh/blogs.git
branch: main
  1. 重新hexo clean -g, hexo g, hexo d
  2. 然后就成了。从https://yourgithubname.github.io/blogs访问博客页面了。

再说一下错误的方案:

  • github仓库的setting中的Pages下面有个Custom domain,这个域名是要重新买的,搞一个CNAME,然后绑定到这里。就可以实现自定义域名访问了。
  • 之前还试过调整yourgithubname.github.io这个仓库下面的分支,还以为调整分支能实现我的目的,结果发现完全不对。

个人主页

  • academicpages.github.io

fork一个academicpages.github.io,然后按照这个改一下,每次只需要修改内容之后push到对应的仓库,等待一会就自动部署到github.io上,即可看到页面更新了。如果不在本地预览,那么修改完主页内容之后,直接push到github.io的仓库就行, github pages会重新自动部署。

但是后面发现这个主页非常的臃肿,里面很多不需要的冗余内容,而且风格不是很满意,在跨平台上的显示也不是很顺滑。就换成了下面这个。

  • acad-homepage.github.io

主页见这里。操作推荐看英文版的,中文的更新比较滞后。步骤很简单,一些自定义的部分就配置config.yaml,按照官方的Ruby Gem中介绍的步骤,一路默认选项,安装好gem,bundle, 查看jeklly -v,显示版本号说明安装成功,然后运行bash run_server.sh,根据提示就可以在本地预览了。

  • 本地预览时可能会报错(Windows平台):No source of timezone data could be found. (TZInfo::DataSourceNotFound),根据提示,在这里,找到解决方案。然后重新本地预览即可。gem install tzinfo-data添加时间库,然后再次运行bash run_server.sh,应该就行了。
  • 有的方案说本地预览用bundle exec jekyll liveserve,这个无效!

个人简历

​ resume可以用类似的方式搞一个repo,然后找一些简历模板,css的。本地可以编辑好,采用和blogs相同的步骤部署就行。

  • 也可以使用\(\LaTeX\)来写,比如这里。直接在overleaf上面就能修改。

参考资料

  • https://blog.csdn.net/xuedan1992/article/details/83445756
  • https://goddywu.github.io/2018/02/24/%E4%BD%BF%E7%94%A8github%E5%AD%90%E7%9B%AE%E5%BD%95%E9%83%A8%E7%BD%B2hexo%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
  • https://docs.github.com/en/pages/quickstart

title:Hexo进阶

author:AmazingHao

link:http://whu-lyh.github.io/blogs/2023/02/25/Hexo%E9%83%A8%E7%BD%B2/

publish time:2023-02-25

update time:2023-10-14

#
| visits
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×