昨天工程师在我们共同的群组分享他的blog,他提到是使用Jekyll(一个简单静态blog网站生成器)架在github上的。

 

于是好奇的我决定照着关键字来搜寻一下,如法炮制做一个出来。

也可以放一份到自己的Blog(zflwx)!

 

A.在你自己的Github帐号建立新文件夹github.io

名称必须是你的username.github.io

 

建好后下载这个文件夹。

 

补充:Github是个放程序的地方,最多只能呈现特定的静态页面(适合放blog/履历表之类的内容。)

无法放搭配服务器与数据库共同运作(例如会员登入、购物车等功能)的动态网站,!

如果想架动态网站,可以去Heroku

 

B.在github.io文件夹内新增首页

刚刚下载的文件夹,预设会储存至本机端电脑的这个路径(以我的Mac为例):

 

/Users/tingtinghsu/Documents/GitHub/tingtinghsu.github.io

在本机里的yourusername.github.io新增空白页面index.html,使用html语法编辑。

 

 

来改一下简单的Hello World Style代码:

 

<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

</head>

<body>

<h1>Hello Ting Ting!</h1>

<p>This is my GitHub Pages.</p>

</body>

</html>

这时候猫猫工程师在我耳朵旁边OS打广告:VS code好用!

 

改好后,重点来了!先git commit to Master(储存修改到本机),再git push(上传将你要发布的网页到Github的文件夹上)

 

给Git新新手的连接:

常用Git指令,网络上资源非常丰富,我参考这里博客,

 

如果新手想先跳过git指令本机端的图形界面编辑器,可以下载Github桌面版。

 

好啰!来地址栏试试看自己的blog阳春首页会不会出现?

 

http://tingtinghsu.github.io/

 

 

成功!

 

C.在本机上装Jekyll

Jekyll

 

Jekyll是base on ruby开发的博客网站生成器,需要的版本要ruby2.0以上。

在termimal输入ruby -v确定一下版本:

 

Ruby版本没问题,就可以输入指令在本地安装Jekyll

 

gem install jekyll

建一个新文件夹写Blog的指令:

 

jekyll new myblog

cd myblog

开启Jekyll服务器:

 

jekyll serve

在地址栏输入http://localhost:4000/

应该会出现这样的画面:

 

接下我们就可以在本地端进行完修改网页,再用git上传。

到你的网志连接:http://tingtinghsu.github.io/

 

 

就可以看到改好的页面了~~

 

[后记:]

安装Git这部分我卡住了一段时间,因为以前没有相关的观念。

 

感谢工程师教学(leafor):

 

每次上传前的好习惯是要输入git status:先用git看看哪些文件夹还没有merged

 

如果出现了Unmerged paths,代表本地曾经新建过的新档案,Github上还没备份:

 

(use“git add <file>…”to mark resolution)

 

added by them: _posts/2018-08-24-my_first_jekyll_page.markdown

both modified: _site/feed.xml

both modified: _site/jekyll/update/2018/08/24/my_first_jekyll_page.html

git add .:把所有更改过的所有网页加入暂存变更

如果只要加入某个特定网页,就在git add后加上网页路径

 

 

git status:确定一下刚刚是否已经存入暂存变更

绿色的字就是已经存入:

 

git log:commit过的动作会进log做纪录,-m“”加上自己的注释:commit过什么事情

 

 

git push:记得要先commit后再push。

 

git pull:如果和其他人协同作一个博客/项目,有可能GitHub上的变更会比较新,此时要先Pull下来,再push上去,才会确保是最新版本喔!

 

看到逐渐新增的blog文章页面,很有成就感呢!:)