在github上搭建免費的博客

時間 2019-11-12

標籤 github 搭建免費博客欄目 Git 简体版

原文原文鏈接

github好多年前，你們都開始玩啦，我這個菜鳥近幾年纔開始。github不只能夠管理項目，還能夠搭建博客。技術人員，通常用的博客爲博客園，CSDN多一些。看到朋友們都弄一個，我也開始弄起來，先找點資料看看，而後開始動手了。html

個人電腦是MAC的，其餘系統也差很少。先看看我建博客的過程，已經成功了，並且很好用，你們能夠看看個人網址https://lu-yuan.github.io .git

　　(1)首先在github上註冊帳號，可使用github，https://github.com/join?source=header-homegithub

這個比較簡單，填寫用戶名，郵箱，密碼等就能夠了。若是有帳號了，咱們接着看下面。post

　　(2)搭建github博客，須要用的東西，github page, jekyll模板。網站

首先打開https://pages.github.com/，按照步驟一步一步來，ui

第一步，先建一個項目倉庫，名稱很重要，要和用戶名一致。url

第二步，github客戶端下載，超好用的，下載客戶端，插件

客戶端裝成了，htm

第三步，建立index.htmlblog


<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

第四步，先選中change部分，而後commit, 再而後sync

第五步，提交成功，瀏覽頁面，https://username.github.io 記得username換成你的用戶名

github pages完成了，接着jekyll模板部分。

jekyll是靜態站點生成器。根據網頁源碼生成靜態文件。提供了模板，變量，插件等功能，用來編寫整個網站

第一步，建立項目，

在本地先建個文件夾，blog.

$ mkdir jekyll_demo

對該目錄進行git初始化

$ cd blog

$ git init

而後，建立一個沒有父節點的分支gh-pages。由於github規定，只有該分支中的頁面，纔會生成網頁文件。

$ git checkout --orphan gh-pages

第二步，建立設置文件

在根目錄下，建立一個名爲_config.yml的文本文件。是jekyll的設置文件，咱們在裏面填入以下內容，其餘設置均可以用默認選項，具體解釋參見官方網頁

baseurl: /blog

如今目錄結構變成：

/blog
　　　　|--　_config.yml

第三步，建立模板文件，

在根目錄下，建立一個_layouts目錄，用於存放模板文件，

$ mkdir _layouts

進入該目錄，建立一個default.html文件，做爲Blog的默認模板。並在該文件中填入如下內容

　　<!DOCTYPE html>

　　<html>

　　<head>

　　　　<title>{{ page.title }}</title>

　　</head>

　　<body>

　　　　{{ content }}

　　</body>

　　</html>

Jekyll使用Liquid模板語言，{{ page.title }}表示文章標題，{{ content }}表示文章內容，更多模板變量請參考官方文檔

如今目錄變爲

/blog
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html

第四步，建立文章

在根目錄，建立名爲_posts目錄，做爲blog的文章。

$ mkdir _posts

進入該目錄，建立第一篇文章，名爲2017-04-19-hello-world.html

在該文件中，填入以下內容，注意行首不能爲空格，

---
layout: default
title: 你好，世界
---

<h2>{{ page.title }}</h2>

<p>個人第一篇文章</p>

<p>{{ page.date | date_to_string }}</p>

每篇文章的頭部，必須有一個yaml文件頭，用來設置一些元數據。它用三根短劃線"---"，標記開始和結束，裏面每一行設置一種元數據.

"layout:default"，表示該文章的模板使用_layouts目錄下的default.html文件；"title: 你好，世界"，表示該文章的標題是"你好，世界".

如今目錄結構變成：

第五步，建立首頁

在根目錄，建立一個index.html文件，填入如下內容

　　---
　　layout: default
　　title: 個人Blog
　　---

　　<h2>{{ page.title }}</h2>

　　<ul>

　　　　{% for post in site.posts %}

　　　　　　<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

　　　　{% endfor %}

　　</ul>

如今目錄結構變成這樣，

第六步，發佈內容

這個簡單的blog，能夠發佈了，在github上建立倉庫blog

　　$ git add .

　　$ git commit -m "first post"

　　$ git remote add origin https://github.com/username/blog.git

　　$ git push origin gh-pages

note: username換成你的用戶名

打開生成的頁面，http://username.github.com/blog/

這個時候，發現，不少年前，這樣的網址是能夠打開的，如今打不開了。如今github只能打開http://username.github.io

因此倉庫作了下調整，

blog庫下的用來看blog文章，

username.github.io庫下的用來放首頁，可瀏覽的URL, 及設置文件baseurl.

項目文件結構：個人目錄結構豐富了些，你也能夠作的更豐富更好看，紅圈爲主要內容

如今你可使用建好的博客了，爲了把頁面作的更好看，能夠加入CSS, IMAGE, JS等

可參考個人庫來建博客，http://username.github.io

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。