昨天工程师在我们共同的群组分享他的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文章页面，很有成就感呢！：）

[Ting's笔记Day2]在Github用Jekyll创建自己的blog的更多相关文章

  1. [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  2. Github pages + jekyll 博客快速搭建

    Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...

  3. github page+jekyll搭博客初体验

    div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding ...

  4. 使用GitHub Pages+Jekyll搭建个人博客

    GitHub Pages 免费无限容量的站点数据托管工具(国内访问速度较慢),内置Jekyll服务,能将特定名称的代码仓库动态编译为静态网页 Jekyll 基于Ruby的静态网页生成系统,采用模板将M ...

  5. 使用GitHub Pages + Jekyll 建立博客

    https://pages.github.com/ http://jekyllbootstrap.com/usage/jekyll-quick-start.html Jekyll是一个静态网站生成器, ...

  6. 写作环境搭建(git+github+markdown+jekyll)

    转载自: https://site.douban.com/196781/widget/notes/12161495/note/264946576/ 2013-03-04 19:33:10   --- ...

  7. Jekyll+GitHub Pages部署自己的静态Blog

    混了这么久,一直想拥有自己的博客,通过jekyll和GitHub Pages捣腾出了自己的博客(https://www.ichochy.com) 一.安装jekyll 首先有安装Ruby的开发环境 运 ...

  8. GitHub 可以免费创建私人仓库啦

    如果你不知道什么是 GitHub,也可以往下看,只不过可能感受不会那么深啦. 昨天,GitHub 博客发表了文章 其中比较重要的已经用蓝色线标注了. GitHub 支持开发者创建免费私人仓库,但是需要 ...

  9. .NET CORE学习笔记系列(2)——依赖注入[4]: 创建一个简易版的DI框架[上篇]

    原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从 ...

随机推荐

  1. 王者荣耀交流协会 -- 第5次Scrum会议

    Scrum master : 任思佳 要求1 : 工作照片 照片由王超同学拍摄 ,王露芝同学(外援)没有参加本次会议. 要求2 : 时间跨度:2017年10月17日 18:00 - 18:25 共计2 ...

  2. linux do{} while(0)

    do{}while(0) 在linux中,经常会看到do{}while(0)这样的语句,许多人开始都会疑惑,认为do{}while(0)毫无意义,因为它只会执行一次,加不加do{}while(0)效果 ...

  3. 使用元类 编写ORM

    元类 一句话: 元类定制类的创建行为 知识点 1.类的创建: python这种动态语言,函数和类的定义,不是编译时定义的,而是运行时动态创建的. Python解释器遇到class定义时,仅仅是扫描一下 ...

  4. 德州扑克AI--Programming Poker AI(译)

    前言: 最近在研究德州扑克的AI, 也想由浅入深的看下, 在网上找了一圈, 发现很多文章都提到了一篇文章: Programming Poker AI. 仔细拜读了一下, 觉得非常不错. 这里作下简单的 ...

  5. CH3401 石头游戏（矩阵快速幂加速递推）

    题目链接:传送门 题目: 石头游戏 0x30「数学知识」例题 描述 石头游戏在一个 n 行 m 列 (≤n,m≤) 的网格上进行,每个格子对应一种操作序列,操作序列至多有10种,分别用0~9这10个数 ...

  6. [CF1041F Ray in the tube][数学]

    http://codeforces.com/contest/1041/problem/F 题目大意: 下边界有n个给定点,上边界有m个给定点,可以从任意一个点发出一条激光,激光碰到边界会反射 激光到达 ...

  7. C# 线程安全集合

    转载 对于并行任务,与其相关紧密的就是对一些共享资源,数据结构的并行访问.经常要做的就是对一些队列进行加锁-解锁,然后执行类似插入,删除等等互斥操作. .NetFramework 4.0 中提供了一些 ...

  8. DevExpress中barManager下的toolbar如何在panel中显示

    如题,我的Dev Toolbar需要在一个pannel中显示,并且居于最顶部.可是好像默认情况下toolbar都是在窗体的最顶部的,如何设置才能使其位于一个panel的最顶部呢? 解决方案:经过测试, ...

  9. freemarker语法介绍及其入门教程实例

    # freemarker语法介绍及其入门教程实例 # ## FreeMarker标签使用 #####一.FreeMarker模板文件主要有4个部分组成</br>####  1.文本,直接输 ...

  10. 强制找回gitlab管理员密码

    强制找回gitlab管理员密码 最近使用gitlab的时候发现管理员密码忘记,现将找回密码的操作过程记录下来. 1.在gitlab登录窗口 如果密码忘记了登录不进入,可以先尝试点击登录框下方的Forg ...