学术网页搭建 Academic Page

摘要

记录个人学术网站的搭建，主要包含本地部署 docker 和搭建基于 jekyll 的网站。

简介

这里会收集一些比较好的单页的简历的模板。在线的简历，可以方便的进行展示。下面会放一些我在 github 上找到的可以使用的模板。同时我会介绍基于 jekyll 的学术网站的搭建，配合 docker 的简单使用。

下面是我的个人主页，https://wangmn.cn/

 

参考资料

• DIY-个人学术主页搭建，一个比较全面的个人学术主页搭建指南；
• Academic Pages Wiki，关于 Academic Pages 的说明文档，包含如何自定义等；

 

Docker 简单使用

由于下面在介绍个人学术网页本地调试的时候，需要用到 docker，因此在这里介绍简单的用法。

Ubuntu 安装 docker

这里我推荐使用清华源来进行安装，可以参考链接：清华源头，Docker CE 软件仓库

 

关于管理员权限

在安装完 docker 之后，会发现需要使用 sudo，否则会出现 permission denied 的问题。这是由于当前用户没有权限访问 Docker 守护进程引起的。以下是解决方法

首先，将当前用户添加到 Docker 组中，以便能够访问 Docker 守护进程。

接着我们重启系统，重启后打开终端运行以下的命令检查 docker 是否正常工作：

 

常用的 docker 命令

• 查看 docker 版本：docker --version；
• 拉取镜像：docker pull <image name>；
• 列出本地的镜像：docker images；
• 运行容器：docker run <image name>；
• 列出正在运行的容器：docker ps -a；
• 查看 docker 系统资源的使用：docker stats；
• 导出 docker 镜像，将镜像保存为一个 tar 文件：docker save -o your-image.tar your-image-name
• 导入 docker 镜像，将 tar 文件加载到 Docker：docker load -i your-image.tar

 

基于 Academic Pages 的学术主页

这里介绍基于 academicpages 项目的个人学术网站。该项目基于 jekyll，便于修改和部署。下面的内容包含（1）本地调试；（2）项目结构，包含如何修改；（3）一些基于该模板的项目，可以参考别人的修改进行修改。

本地调试-推荐 Linux

我们首先将项目 clone 到本地，接着创建 docker images：

我们解释一下上面的命令：

• docker build：这是用于构建 Docker 镜像的命令。
• -t your-image-name：-t 选项用于为构建的镜像指定一个标签（tag）。your-image-name 是你想要给镜像起的名字。在这里镜像的名字就是 jekyll-site。
• .：这是 Dockerfile 的路径。在这个例子中，. 表示当前目录。

运行完上面的命令后，可以使用 docker images 来查看镜像是否创建成功。然后进行本地调试

我们解释一下上面的参数，其中：

• docker run: 启动一个新的容器。
• --rm: 当容器停止时自动删除它。这有助于保持系统的整洁，避免残留的容器占用空间。
• -p 127.0.0.1:5000:4000: 将本地主机的 5000 端口映射到容器的 4000 端口。
  • 127.0.0.1 确保服务只能从本地主机访问。
  • 5000 是本地主机的端口。
  • 4000 是容器内的端口。
• -v <项目路径>:/usr/src/app: 将本地的 <项目路径> 挂载到容器内的 /usr/src/app 目录。
  • <项目路径> 是你的项目在主机上的绝对路径。这里是我们下载的 academic page 的文件夹的路径；
  • /usr/src/app 是容器内的路径，Jekyll 会在这里查找项目文件。
• jekyll-site: 使用名为 jekyll-site 的镜像来创建容器。

上面的命令执行之后，如果出现了下面的输出表示运行成功：

接着我们可以打开 VSCode，连接容器，然后修改文件。文件的路径在 /usr/src/app 下面。修改之后运行下面命令进行编译：

成功编译后可以在本地浏览器打开 127.0.0.1:5000 查看修改后的网页内容。

 

项目目录结构

首先我们来介绍一下该项目的文件目录。更好的了解目录有助于我们进行自定义。

• _config.yml，网站基本信息，包括一些全局的设置；
  • basic site setting (网站的基础设置)
    • title，显示在网站左上角的内容，这里可以是名字；
    • url，基础链接，需要改为自己的 url，因为后面需要用这个 url 进行拼接（这个是非常重要的）；
  •  author
    • avatar，个人图片
    • bio，个人简介，可以是目前就读学校或是工作单位；
• _layout 文件夹：包含不同的页面布局，pages 文件夹中的页面都是继承这里的布局；
• _data 文件夹：
  • navigation.yml，控制顶部导航栏的信息；
• _pages 文件夹（默认的里面包含很多页面，可以根据需求进行删减）：
  • about.md，默认的首页，打开之后首先会看到的内容；
  • publications.html，这里默认会遍历 _publications 文件夹，生成对于的文章。可以对这里进行修改，只显示论文的标题，作者，期刊等信息。
• _publications 文件夹，这里存放所有发表的文章的 markdown 文件（介绍每一篇文章），我是将这部分去掉，直接修改了 publications.html 文件，使其直接显示文章信息。我将文章的内容放在了研究工作部分；
• _includes 文件夹
  • footer：自定义页脚的部分；
  • head：自定义页头的部分；
• _site，这是使用 jekyll build 之后生成的静态文件，这个文件夹包含了最终的 HTML、CSS、JavaScript 等文件，准备好用于部署。

 

设置 Page

在完成内容的修改之后，我们需要在 github 上进行发布。我们以此进入 setting -> Pages -> Source [Github Action: Jekyll]，然后我们将 Jekyll 的 workflow 的配置文件添加到仓库中。

注意：如果添加成功，会多出 .github/workflow/jekyll.yml 文件，有了这个文件之后，每一次进行 push 就会自动执行 Github Action，生成对应的文件。如果设置成功，我们可以在 Pages 页面看到对应的网址，点开即可。

 

自定义域名

在完成 Page 的设置后，我们可以通过 github 的链接打开网站。有时我们需要更进一步，希望使用自定义的域名。下面介绍设置自定义域名的步骤：

• 首先，进入 github 的设置界面，将域名加入其中，https://github.com/settings/pages
• 接着配置 DNS
  • 添加 A 记录，指向 Github Page 的 IP 地址（这里 IP 地址是一样的）
    • 185.199.108.153
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153
  • 添加 CNAME 记录
    • 将 www 的 CNAME 记录指向 username.github.io，其中 username 是 GitHub 用户名，需要自行进行修改。
• 最后进入项目仓库的设置，在 Custom domain 中设置自定义的域名即可。

注意：当使用自定义域名之后，需要修改网站的 config.yml 中的 url，将其修改为上面设置的自定义的域名。

 

使用改模板的网页

这里简单列出了使用该模板的一些用户网页，可以用于查看效果：

• Liu, Junjie from HKUST
• Zhen Wang from USTC，在他的 blog 中也有记录如何使用该模板的教程；
• Wang Hao from HKUST(GZ)，这个老师的主页内容是比较全的；

 

其他单页简历

下面是一些静态 HTML 的单页简历模板。Github链接，https://github.com/rrdelaney/material-resume。该简历的最终效果如下所示：