用 Jekyll 在 GitHub 上搭建你的个人网站

题图:pexels

这是我面向小白写的 Python 编程教程的⎡加餐⎦。
.

引子

前段时间折腾几次后终于把我的个人博客站点搭建起来啦:SinanTang.github.io 欢迎来访!

因为有朋友来问,我就打算写个如何利用 Jekyll 在 GitHub 上搭建静态个人站点的小白教程。

.

先简单科普一下,Jekyll 是个简单的博客形态的静态站点生产工具,可以通过 Jekyll 来生成可发布的网站/博客。网站需要服务器来对外发布,可以选择在 GitHub Pages 上运行,利用 GitHub 服务器不仅方便追踪历史版本、迭代更新,而且完全免费

提供与 Jekyll 类似服务的工具不止一个。我最开始尝试过 Hexo,但中途遇到一些麻烦没解决掉……无意间看到阳志平这篇《理想的写作环境:Git+Github+Markdown+Jekyll》,就转而投向 Jekyll 的怀抱了。

这也从侧面说明,对小白来说,一开始选择一门编程语言或工具入门时,最好考虑使用人数(即是否主流)这个因素,越主流网上的学习资源就越多,当你遇到问题时就更有可能搜索到解决方法。

.

至于为什么要搭建一个属于自己的个人网站,除了看起来有点炫酷外,对于有意在创作型领域(写作/摄影/绘画/编程等)发展的小伙伴来说,个人网站就是最好的个人作品集——

作品会帮助你与第三方沟通。尤其是一些你在意,但不理解你的人。比如父母/亲友。在外在动机的人看来,作品是最重要的;但在内在动机的人看来,作品是水到渠成的结果。”

——阳志平

.

开始搭建个人网站

好啦,下面进入正题。

新建一个 GitHub 项目

首先你要有个 GitHub 帐号,同时最好已经熟悉了《用 Git 记录成长轨迹》这一节中的常见 Git 操作。

然后新建一个 GitHub repository(具体操作见第2节),将新 repo 命名为 USER-NAME.github.io。注意,这个名称的格式是固定的,有一点儿不同就没法用 GitHub 服务器来帮忙发布。USER-NAME 是你的用户名,即点击 GitHub 页面右上角个人头像时出现的名字(Signed in as USER-NAME)。

.

本地初始化一个 Jekyll 站点

安装 Git 和 Ruby

呼出 Terminal,确认本地已经安装好 Git 和 Ruby:

# 若未安装 git,请回到第2节进行安装操作
git --version
# 若未安装 ruby 或版本低于 2.1.0, 可以跟着下面的操作来安装 ruby
ruby --version

选做:安装 Ruby 2.3.1

\curl -sSL https://get.rvm.io | bash -s stable
# rvm 是 Ruby 的版本管理工具
rvm install 2.3.1
rvm use 2.3.1
# Terminal自己忙完后,再确认一下是否成功安装 ruby, rvm, gem
ruby --version
rvm --version
gem --version

.

安装 bundler

还是在 Terminal 中输入下面指令:

gem install jekyll bundler

.

创建你的本地 Jekyll 站点

继续输入:

# 把 jekyll 站点建在 Public directory 下
cd ~/Public
jekyll new USER-NAME.github.io
cd USER-NAME.github.io
bundle exec jekyll serve  #1

以上几步都完成后,点击 ⌘T 开一个新 Terminal tab,输入:

open http://localhost:4000  #2

或者也可以直接打开浏览器,输入 localhost:4000

此时你就可以在浏览器上看到网站的初始模样啦。以后每次你做了修改后,想要预览改动时,就可以在 Terminal 中依次输入 #1 #2 这两步(注意要先 cd 到目标路径哦)。

退出预览模式,在 Terminal 内键盘点击 ⌤C

.

初始化本地站点并发布

USER-NAME.github.io 目录下,在 Terminal 中继续输入:

git init
git status
git add . 
git commit -m "initial commit"
# 从最开始创建的新GitHub repo页面,复制项目网址,粘贴到下面网址部分
git remote add origin https://github.com/USER-NAME/USER-NAME.github.io.git 
git push -u origin master

在输入以上最后一条指令后,也许会出现 fatal: unable to access 'https://github.com/USER-NAME/USER-NAME.github.io.git': The requested URL returned error: 403 这样的错误信息,这是权限的问题,可以尝试输入以下指令来解决:

git remote set-url origin https://USER-NAME@github.com/USER-NAME/USER-NAME.github.io.git
# 检查刚刚输入的那串url是否在这儿出现了
git remote -v
# 重新 push 一次,此时需要输入你的GitHub账号密码
git push -u origin master
# 确认刚刚提交的改动是否出现在日志里
git log

.

阶段性成果

现在你可以去浏览器里输入 USER-NAME.github.io 查看自己的刚刚发布的网站啦!此时别人也可以通过你的个性化域名来访问你的个人网站了。

.

.

接下来……

经过以上几步后,我们已经有了一个个人网站的雏形,接下来还要换名字、换主题、添加目录等页面……不过最重要的是,应该学会发布内容到网站。

其实发布内容(如文章)到个人网站的操作与之前第2节《用 Git 记录成长轨迹》中重点讲解的 add-commit-push 提交改动三部曲差不多,只不过需要用 Markdown 格式来书写文章。

Markdown 编辑器强烈推荐简洁轻便的 Typora

.

换主题、添加更多页面等琐碎操作教程就不在这篇详述了。有搞不定的地方欢迎读者留言,我可能会根据反馈写新的《搭建个人网站 - 进阶篇》!
.

推荐阅读:

《写给小白的工程师入门 - 从 Python 开始》
《用 Git 记录成长轨迹 | 写给小白的工程师入门》
《工程师的脑子和普通人不一样》
《Python 数据类型、运算符、变量》
.

谢谢你的阅读!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容