Academic - 搭建学术主页
需求来源
这个需求来源于我想要在当前博客的页面中添加一个用于展示学术成果的页面,但是当前博客使用的框架是Hexo,主题是Fluid,而想用的学术页面的框架是基于Jekyll的luost26/academic-homepage,因此需要在我的Github Page部署两个不同的框架,即Hexo和Jekyll。目前的想法是将用于学术成果展示的页面部署在博客的一个子页面下。

本地部署
Fork luost26/academic-homepage 这个项目到自己的仓库中,按照 luost26/academic-homepage 中本地部署的要求:
查看Jekyll的Requirement,安装相应版本的Ruby、GCC、MSYS2以及Make(这里推荐使用Scoop进行Windows环境下的安装)
安装Jekyll和bundler gems:
1
gem install jekyll bundler
Clone forked 的仓库到本地,以我的仓库为例:
1
git clone https://github.com/chen-huaneng/academic-homepage.git
进入相应的文件夹:
1
cd academic-homepage
修改 academic-homepage 文件夹中的
_config.yml
文件:1
baseurl: "/academic" # 确保资源路径正确
如果不进行设置会导致 CSS/JS 文件加载失败
构建 Jekyll 站点:
1
2bundle install # 安装依赖
bundle exec jekyll build # 生成静态文件到 _site 目录复制文件到 Hexo 博客的文件夹下:
1
robocopy "_site" "path\to\hexo\folder\source\academic" /E /NFL /NDL /NP /XO
在 Hexo 的
_config.yml
中添加:1
2skip_render:
- 'academic/**' # 禁止 Hexo 处理 academic 目录下的文件部署 Hexo 站点:
1
hexo clean && hexo deploy
本地预览
如果想要在本地预览修改效果可以在完成本地部署部分的第6步之后在命令行中输入:
1 |
|
然后在浏览器中打开命令行中输出的相应网址即可。
在子目录 _data
、 _news
、_publications
和 _showcase
中修改相应的文件就可以修改相应的网站内容。
自定义页面
如果要自定义子页面的 Favicon,在 _layout
文件夹下 default.html
的 <head>
中添加:
1 |
|
然后在相应的 assets
文件夹下添加相应的图片即可。
如果要添加自定义的联系方式,这里以添加个人博客为例说明。首先在 _data
文件夹下的 profile.yml
中添加字段:
1 |
|
然后在 _includes\widgets
文件夹下的 profile_card.html
中添加相应的代码:
1 |
|
相应的图标可以在 Font Awesome 中找到,比如上面 Blog
的图标是 <i class="fa-solid fa-pen-to-square"></i>
。