15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 用 Github Pages 制作个人主页的一点感悟

用 Github Pages 制作个人主页的一点感悟

时间:2023-07-06 01:33:01 | 来源:网站运营

时间:2023-07-06 01:33:01 来源:网站运营

用 Github Pages 制作个人主页的一点感悟:

导言

最近咱TA们都在为Job Market 做准备,而大家几乎都有个人主页,由此激发了我对这东西的兴趣。个人主页的制作有点意思,这类portfolio类的网站 算是很简单的网页,在不需要学什么语言的情况下就能顺利地搞出属于自己的个人网页,不过在不了解情况时,我也以为做这主页是个很牛的活(当然高端复杂的设计的确很牛)。

不过主页这东西,对于 PhD 而言,有的人说二年级之前就得做一个先,之后 Teaching 的 materials 可以上传上去,实时管理; 也有的人会四年级再做,毕竟简单半天不到就搞好了。这就看个人情况了,我倒觉得不错的主页非常赏心悦目,且做起来又不费时间,早早弄一个,之后看到更好的排版也可以修改嘛。至于想进企业的人儿,在简历中蹦出一个personal websites,应该也给人有新鲜感。





Github Pages

其实除了 Github Pages,还有许多不用写代码的个人网站制作平台,比如 Google Sites, Weebly, WiX, Wordpress 以及学校自己的服务器。

对于个人网站制作平台,的确是一个不错的选择,更多可参见:
怎样在不会做网站的前提下拥有个人网站? 。 学校服务器则和制作平台差不多,有的也可以上传 CSS 和 HTML 来编写个人网页,那就和 GitHub Pages 差不多了。而对于在服务器中购买域名,然后搭建... 那我就不懂了,一个小小的个人主页似乎也用不上?

至于为什么使用 GitHub Pages,除了国内外都可访问,更重要的则是可以方便地同步网站信息与自己的代码及相关课件,非常适合既需要一些或很多编程又需要上传 Paper 和各种文件的经济学孩纸们(Theoretical 除外?)

在介绍之前,基本上就是本站上关于 GitHub Pages 建站相关的高票回答和文章:
- 怎样做一个漂亮的 GitHub Pages 首页?
- 程序员必备技能:在Github Pages上部署自己的简历

之所以要写这篇文章,是因为我并没有用以上链接给出的方法或模板,因为它们让我有一种看起来很复杂的感觉。





STEP-1 找到喜欢的模板

Github 是个管理和记录代码的网站(不了解的童鞋可以看:怎样使用 GitHub?)。

首先,根据 Github Pages 的介绍, 进行初步配置:

进入 Github,点击 create a new repository来创建新的库, 用 username.github.io 来命名

点击完成后,接下来可以照着 Github Pages 的介绍做,BUT,这里介绍另一个神方法。

既然我们搭建个人网站的主要目的是来放自己的Bio、CV、Research、Teaching, etc. 而且关于 GitHub Pages 的介绍一般都是 有什么模板、有什么主题,不同的模板使用的代码和模式都不太一样,有的用html, 有的用 CSS,有的则是 markdown, 还有的则是 php. 虽然基于模板可以照着葫芦画瓢但若有格式不懂,要需要去查阅相关这些代码, 有一定的门槛, 也会浪费更多时间。

所以,除了clone 一个现成 template 这法子,还可以去找那些你认为不错的个人主页,再倒过来编辑TA所使用的模板和主题。对于制作一个学术的个人主页,当然是去借鉴各校 Job Market Candidates 的主页最佳。

举个栗子:
NEBR 会把所有高校的 Job Market Candidates 综合在一个页面里: Ph.D. Candidates in Economics, 选择你需要看的相关高校,就能轻易找到他们的个人主页,例如:
来自 NYU 的 Keith ;UPF 的 Paul ;或者 IZA 的Tylor

他们的个人主页基本都能找到一个 Github 的链接:




跳转回 GitHub 后,找到他们 http://github.io 的库:




clone or download 到自己的库中,现成的学术型模板就完工了。

如果是 http://github.io 的网站,那么你总会在TA的 GitHub-repositories 中找到, 如果不是 github 建站,但你又特别喜欢该网站的样式,你可以通过观察网页是否有模板链接(多数在页面最下方),如果没有模板链接,你也可以选择右击页面 - inspect




选择 Sources, 从而查看该页面的所有代码和文件:




下载这些文件,上传到自己的 http://github.io 库中,也能得到模板。


STEP-2 怎么修改模板?

以 Tyler的主页为例:




可以看到:

相关主题的代码文件在 assets; javascripts; stylesheets三个文件夹 中,暂时不管它们;

teaching、research 两个文件包含了他 teaching、 research 两个界面中上传的相关文件,我们也可以相应地在这里储存管理我们的文件;

剩下的 html 文件则是我们需要首先编辑修改的,其中 index.html 是首页的信息;其他文件可以自主命名;

以 index.html 为例:

<!doctype 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>Tyler Ransom by tyleransom</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"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <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> <!-- For all browsers --> <link rel="stylesheet" href="assets/css/academicons.min.css"/> <link rel="stylesheet" href="assets/css/academicons.css"/> </head>以上这部分没啥可动的,基本都在表达怎样引用网上或已下载到 assets、stylesheet 中的文件,算作主题模板部分吧。其中 title 就是别人打开你网页时小标签显示的名字,你修改成你的名字(加机构),

<body> <div class="wrapper"> <header> <h1>Tyler Ransom</h1> <p>Assistant Professor of Economics<br>University of Oklahoma</p> <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/">Home</a></p></h3> <h3><p class="view"><a href="https://tyleransom.github.io/research.html">Research</a></p></h3> <h3><p class="view"><a href="https://tyleransom.github.io/research/CV.pdf">CV</a></p></h3> <h3><p class="view"><a href="https://tyleransom.github.io/code.html">Code</a></p></h3> <h3><p class="view"><a href="https://tyleransom.github.io/teaching.html">Teaching</a></p></h3> <h3><p class="view"><a href="https://tyleransom.github.io/personal.html">Personal</a></p></h3> <p class="view"><b>Social</b><br> <a href="mailto:ransom@ou.edu" class="author-social" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a><br> <a href="https://scholar.google.com/citations?user=eohlTTcAAAAJ&hl=en" target="_blank"><i class="ai ai-fw ai-google-scholar-square"></i> Scholar</a><br> <a href="http://ideas.repec.org/f/pra541.html"><i class="fa fa-fw fa-share-alt-square"></i> RePEc</a><br> <a href="http://github.com/tyleransom"><i class="fa fa-fw fa-github-square"></i> GitHub</a><br> <a href="http://twitter.com/tyleransom" class="author-social" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a><br> <a href="http://linkedin.com/in/tyleransom" class="author-social" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a><br> <p><b>Contact:</b><br>Department of Economics<br>University of Oklahoma<br>322 CCD1, 308 Cate Center Drive<br>Norman, OK 73072</p> </header>这一部分为主体部分,包括边框和导航栏等,然后修改各个超链接,例如邮箱、社交账号、学术主页、联系方式, 依照他的内容,替换成自己的即可;
注意到其导航栏的超链接(<a href=" ">)也需要替换到自己的 github.io 域名下。

<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">Economics</a> at the <a href="http://www.ou.edu/">University of Oklahoma</a> 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">Economics</a> from <a href="http://www.duke.edu">Duke University</a> 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 &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p> </footer> </div> <script src="javascripts/scale.fix.js"></script> </body></html>这一部分则是主页页面的正文内容了, 主页一般就 say hello, 参考各大 PhD Candidate 写自己的就好

综合参考多个主页

如果你还有时间,也可以参考不同的个人主页,综合他们的优缺点,融合到自己的网站中。因为你在前两步已经对这些代码文件比较熟悉了,所以这时候你可以知道,怎么复制粘贴融合了,使用 A 的主题格式, B 的 内容写法 等等。

结语

有些个人网站非常不错,不仅上传他上课的 Notes, 他 Teaching 的 作业和答案, 还有的会论文相关代码等。如果你也是一个爱分享的人,不妨试着搭建自己的个人网站来写博客、分享代码吧!











Thanks




Edited by econdoggy

关键词:感悟

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭