如何使用Github创建你的个人主页？

🍓 课程推荐：连享会：2025CGE 专题：理论与实操·网络直播
嘉宾：贾智杰 (西安交通大学)
时间：2025 年 11月23日、30日, 12月7日
咨询：王老师 18903405450（微信）

作者： 杨涵慧(北京第二外国语学院)
邮箱： y_h_h_l.@163.com

温馨提示： 文中链接在微信中无法生效。请点击底部「阅读原文」。或直接长按/扫描如下二维码，直达原文：

1. 为什么要创建个人网站?
2. 托管和域名
3. 复制模板网站相关代码
4. 修改个人网站

4.1 修改网站思路
4.2 修改首页

5. 结语
6. 参考资料
7. 相关推文

Even if you're not on the market yet, create a simple website so I can find you when I Google your name trying to offer you a job.
— A. Patrick Behrer (@abehrer) July 26, 2023

1. 为什么要创建个人网站?

个人网站就像是记录我们学习、工作和项目经历的舞台，能直接展示我们的技能和兴趣，分享我们的项目、代码和文档，展示我们的技术实力和取得的成就。

长远来看，我们可以在搜索结果中亮相，从而开启更多机会。有人可能会在搜索特定关键词、请求采访或提议合作时找到我们。而且个人网站还能包含更多关于我们的背景或爱好的私人内容，向未来的学生或合作伙伴们提供更多关于我们自己的信息。

借助 GitHub，这一切都能轻松实现，而且完全免费！

由于 Github 是全球学者和程序员的进行代码托管的最大网站，在我们的个人简历或邮件签名档中放置一个包含「https://xxxx.github.io」域名的个人主页地址也是一个很好地向外界传递信号的一个方式：我是一个能折腾代码的人！

2. 托管和域名

如果将网站比作房屋：

托管：这就像“房地产”，是放置内容的在线存储空间，即服务器。
域名：就像“地址”一样。这是我们告诉人们让他们知道我们的房子在哪里。如果不介意拥有一个简单的地址，托管服务通常会提供一个基本域。但是，如果我们想要一个花哨的地址，需要为此支付额外费用。
模板：就像室内设计一样。一旦我们有了房子，就得开始装饰室内。但很少有人会从头开始自己设计内饰。大多数人会选择使用别人设计好的现成内饰，并根据自己的喜好进行调整，这就是模板的用途。

通过 Github 创建个人网站，我们可以利用其提供的免费“房地产”，打造一个简洁而高效的“地址”。同时，我们还可以受益于 Github 上已有的丰富设计资源，为我们的网站注入更多个性与创意。

我们可以根据自己的需求在 Github 上搜索最适合的模板。例如，在 GitHub 上搜索“Hugo academic website template”，然后浏览存储库。

在用 Github 创建个人网站时，主要有两种方法：

根据 Github Pages 的介绍，进行初步配置，可以简单地参考模板。
直接拷贝参考的模板网站，然后根据自己的需要进行修改。

尽管使用模板可以简单地模仿样式，但如果遇到不熟悉的格式，就必须查阅相关代码，这需要一定的技术门槛，也会耗费更多时间。

多数情况下，我们无需追求过于个性化的网站风格，此时可以「复制」一份我们中意的网站的代码，然后把里面的文字介绍和相关链接替换成我们自己的即可。

因此，本文选择第二种方法，以 Tyler Ransom (https://tyleransom.github.io/) 教授的个人主页为模板，简单修改后建立我们自己的个人学术网站。

3. 复制模板网站相关代码

Tyler Ransom 教授个人主页的源码存放于其 Github 仓库中，网址为：https://github.com/tyleransom/tyleransom.github.io。

打开 Github 源码，选择 fork

Note: 这里的「fork」其实就是「复制」的意思。它的作用是将别人的仓库完整地复制一份到自己的 github 账号下。

点击 fork，输入储存名，然后创建 create fork。

注意：储存名构成的格式为 ( ) + .github.io，其中输入的储存名将成为最终网站的域名。若选择不使用默认地址，在生成网站后可能需要额外支付域名费用。

打开已创建的 fork 后，按照以下步骤进行操作：

选择 Settings
在下拉菜单中选择 Pages，将分支设置为 master，保存
耐心等待一段时间，直到 Github Pages 地址出现

生成的链接是已经建立的个人网页地址，但内容仍然与 Tyler 的网页相同。

4. 修改个人网站

4.1 修改网站思路

在浏览时，我们会发现：

与相关主题有关的代码文件存储在 assets、javascripts 和 stylesheets 三个文件夹中，无需处理。
teaching 和 research 两个文件夹包含了他的教学和研究页面上传的相关文件，我们可以在这里存储和管理我们自己的文件。
剩下的 HTML 文件是我们需要首先编辑修改的，其中 index.html 是首页的内容；其他文件可以按需进行命名。

4.2 修改首页

以首页为例，打开index.html

初始设置

html>
<html>
<head>
<script src="https://use.fontawesome.com/baff6f55f5.js">script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>灰灰是大王title>

    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/github-light.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    


    


    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-29643011-3', 'auto');
      ga('send', 'pageview');
    script>

    
    <link rel="stylesheet" href="assets/css/academicons.min.css"/>
    <link rel="stylesheet" href="assets/css/academicons.css"/>

head>

上述部分内容基本不需要改变，主要是关于如何引用存储在在线或已下载到 assets 和 stylesheets 中的文件，可视为主题模板的一部分。

在这些文件中，title 标签用于在他人打开我们的网页时最上方小标签显示的名称，可以将其修改为我们自己的名字（包括机构）。

设置边框导航栏

<body>
    <div class="wrapper">
      <header>
        <h1>Tyler Ransomh1>
        <p>Assistant Professor of Economics<br>University of Oklahomap>
        <p>Research Affiliate<br><a href="http://legacy.iza.org/en/webcontent/personnel/photos/index_html?key=24155">Institute for the Study of Labor (IZA)a>p>
    <h3><p class="view"><a href=


    
"https://tyleransom.github.io/">Homea>p>h3>
        <h3><p class="view"><a href="https://tyleransom.github.io/research.html">Researcha>p>h3>
    <h3><p class="view"><a href="https://tyleransom.github.io/research/CV.pdf">CVa>p>h3>
        <h3><p class="view"><a href="https://tyleransom.github.io/code.html">Codea>p>h3>
        <h3><p class="view"><a href="https://tyleransom.github.io/teaching.html">Teachinga>p>h3>
        <h3><p class="view"><a href="https://tyleransom.github.io/personal.html">Personala>p>h3>
    <p class="view"><b>Socialb><br>
        <a href="mailto:ransom@ou.edu" class="author-social" target="_blank"><i class="fa fa-fw fa-envelope-square">i> Emaila><br>
        <a href="https://scholar.google.com/citations?user=eohlTTcAAAAJ&hl=en" target="_blank"


    
><i class="ai ai-fw ai-google-scholar-square">i> Scholara><br>
        <a href="http://ideas.repec.org/f/pra541.html"><i class="fa fa-fw fa-share-alt-square">i> RePEca><br>
        <a href="http://github.com/tyleransom"><i class="fa fa-fw fa-github-square">i> GitHuba><br>
        <a href="http://twitter.com/tyleransom" class="author-social" target="_blank"><i class="fa fa-fw fa-twitter-square">i> Twittera><br>
        <a href="http://linkedin.com/in/tyleransom" class="author-social" target="_blank"><i class="fa fa-fw fa-linkedin-square">i> LinkedIna><br>
    <p><b>Contact:b><br>Department of Economics<br>University of Oklahoma<br>322 CCD1, 308 Cate Center Drive<br>Norman, OK 73072p>
      header>

这一部分构成了整体框架，涵盖了边框、导航栏等元素。

我们只需要对各个超链接进行调整，如电子邮箱、社交媒体账号、学术主页、联系方式等，将其内容替换为个人信息；同时需将导航栏的超链接()指向我们自己的域名页面。

3.主页页面的正文内容：根据我们个人情况进行介绍

<section>
      <


    
h3>
      <img src="IMG_2409 edit pro photo square small.jpg" height="250" width="250">h3>
      <p>I am currently an Assistant Professor of <a href="http://cas.ou.edu/economics">Economicsa> at the <a href="http://www.ou.edu/">University of Oklahomaa> and Research Affiliate at the <a href="https://www.iza.org/">Institute for the Study of Labor (IZA)a>. I graduated with a PhD in <a href="http://econ.duke.edu">Economicsa> from <a href="http://www.duke.edu">Duke Universitya> in May 2015.p>
      <p>My research interests include labor economics, urban economics, the economics of education, and applications of machine learning.p>
      section>
      <footer>
        <p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlista>small>p>
      footer>
    div>
    <script src="javascripts/scale.fix.js">script>
  body>
html>

5. 结语

对于创建个人网站的其他页面，比如 research、teaching 等，只需要对相关的 HTML 文件进行简单的修改即可。

修改网站可以根据个人需求来进行，从而打造一个与众不同的个人网站。

此外，还可以参考其他人的个人网站，并结合其优点，将它们融入到自己的网站中。例如，可以借鉴某一主题的格式，或者吸收别人的内容写法等，从而使得整个网站更加完善。

6. 参考资料

知乎：用 Github Pages 制作个人主页的一点感悟 - 知乎 (zhihu.com)
Handel, Andreas. 2021. “Create a Simple Markdown/GitHub Website in Less Than 30 Minutes.” January 11, 2021. -Link-.
Handel, Andreas. 2021. “Create a GitHub Website with Distill in Less Than 30 Minutes.” March 21, 2021. -Link-.
Beginner’s Guide on Academic Website for Graduate Students

7. 相关推文

Note：产生如下推文列表的 Stata 命令为：
lianxh
安装最新版 lianxh 命令：
ssc install lianxh, replace

专题：工具软件

左祥太, 2022, 如何搭建个人主页-GitHub / Gitee, 连享会 No.1005.

专题：Stata入门

游万海, 连玉君, 2019, Stata: 外部命令的搜索、安装与使用, 连享会 No.1.

专题：Stata资源

王若溪, 李缘, 2020, Github使用方法及Stata资源, 连享会 No.294.
王萃芳, 2022, Stata与Github交互, 连享会 No.1077.

专题：Stata命令

范思妤, 2022, GitHub中最受欢迎的Stata仓库, 连享会 No.1022.
连享会, 2020, 如何通过-GitHub-发布自己的-Stata-命令？, 连享会 No.422.
顾小龙, 连玉君, 2020, Stata帮助和网络资源汇总(持续更新中), 连享会 No.187.