前言:
做為一枚立志成為武林高手的程序員,怎么可以沒有屬于自己的一片園子呢。
一直想搭建一個博客,但是始終沒開始搞。近期沒事,今天必須把這個事兒搞定。
HEXO+Github 快速、簡潔且高效的博客框架
Jekyll+GitHub 將純文本轉換為靜態博客網站
FarBox The Best Blog Platform for Humans
Hugo Hugo是由Go語言實現的靜態網站生成器。簡單、易用、高效、易擴展、快速部署。
用過HEXO的部分人,現在都轉用Jekyll。
用過Jekyll的人呢,現在又轉用FarBox。
還有些用過Jekyll的兄弟們,現在轉用Hugo
FarBox
是需要自己掏點腰包,對于我個屌絲來說。暫不考慮。
那對于Hugo
,是我最佳選擇。
如果有兄弟想將Jekyll
的文章遷移到Hugo
,Hugo
可以一鍵遷移Jekyll。
快速開始
使用默認的Ananke皮膚創建一個Hugo站點
在這個示例中使用
macOS
系統, 其它系統怎么進行快速開始,看安裝
您還需要安裝Git才能運行本教程。
第一步 導入Hugo
brew install hugo
驗證您Hugo安裝成功:
hugo version
第二步 創建一個新站點
在名為quickstart的文件夾中創建一個新的Hugo站點。
quickstart
站點名字(建議起名字為yourName.com)
hugo new site quickstart
第三步 添加一個皮膚
請參閱themes.gohugo.io以查看需要考慮的主題列表。 這個快速啟動使用美麗的Ananke皮膚。
cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
$ la themes/ananke #看下ananke庫
total 48
-rw-r--r-- 1 hunter staff 41B Jul 31 23:40 .git
-rw-r--r-- 1 hunter staff 331B Jul 31 23:40 .gitignore
-rwxr-xr-x 1 hunter staff 1.0K Jul 31 23:40 LICENSE.md
-rw-r--r-- 1 hunter staff 4.0K Jul 31 23:40 README.md
drwxr-xr-x 3 hunter staff 102B Jul 31 23:40 archetypes
drwxr-xr-x 5 hunter staff 170B Jul 31 23:40 exampleSite
drwxr-xr-x 4 hunter staff 136B Jul 31 23:40 images
drwxr-xr-x 10 hunter staff 340B Jul 31 23:40 layouts
-rwxr-xr-x 1 hunter staff 500B Jul 31 23:40 package.json
drwxr-xr-x 8 hunter staff 272B Jul 31 23:40 src
drwxr-xr-x 4 hunter staff 136B Jul 31 23:40 static
-rwxr-xr-x 1 hunter staff 521B Jul 31 23:40 theme.toml
注意看:
ananke
目錄下有個示例站點exampleSite
。我們用人家的庫,當然得按人家的示例來操作。
在下面,第四步 裝飾你的站點 直接把示例站點中的static
、content
文件夾和config.toml
文件,與自己站點中的static
,content
文件夾,和config.toml
文件進行替換。
static文件夾:存放圖片
content文件夾:存文章(xxxx.md)
第四步 裝飾你的站點
cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/static ./
cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/content ./
cp /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/config.toml ./
關于cp
,命令這里不多說。
你可以用命令行,將ananke
的示例站點exampleSite
下的文件,替換成自己的站點文件。當然,如果你愿意,可以手動替換。
替換完畢后,你的站點下的static
、content
文件夾終于不是空的了。
你的配置文件config.toml
可不再只有幾行命令,而是這樣
title = "Notre-Dame de Paris"
baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-ananke"
themesDir = "../.."
MetaDataFormat = "yaml"
DefaultContentLanguage = "en"
SectionPagesMenu = "main"
Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number
googleAnalytics = ""
enableRobotsTXT = true
[sitemap]
changefreq = "monthly"
priority = 0.5
filename = "sitemap.xml"
[params]
description = "The last theme you'll ever need. Maybe."
facebook = ""
twitter = "https://twitter.com/GoHugoIO"
instagram = ""
youtube = ""
# choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
background_color_class = "bg-black"
featured_image = "/images/gohugo-default-sample-hero-image.jpg"
注意:
你需要刪除這行: themesDir = "../.."
你需要查看你的theme,theme = "ananke"
然后,在你的站點根目錄執行 Hugo 命令進行調試:
hugo server -D
瀏覽器里打開:http://localhost:1313
目前為止: 你的站點已經創建完畢。
關于裝飾你的站點,自己隨便改一改站點下的static
、content
文件,和config.toml
配置文件看看發生了什么改變。
第五步 部署 Host on GitHub
如果你需要部署在 GitHub Pages 上。
首先在GitHub上創建一個Repository,命名為:coderzh.github.io (coderzh替換為你的github用戶名)。
然后修改config.toml
publishDir = "docs"
baseURL = "https://haiteng-wang.github.io/"
然后,在你的站點根目錄執行 Hugo 命令進行調試:
hugo
$ la
你會發現你的站點下多了個docs
文件夾
-rw-r--r--@ 1 hunter staff 6.0K Aug 1 01:12 .DS_Store
drwxr-xr-x 12 hunter staff 408B Aug 1 01:17 .git
-rw-r--r-- 1 hunter staff 108B Jul 31 23:40 .gitmodules
drwxr-xr-x 2 hunter staff 68B Jul 31 23:38 archetypes
-rw-r--r-- 1 hunter staff 838B Aug 1 01:16 config.toml
drwxr-xr-x 8 hunter staff 272B Jul 31 21:55 content
drwxr-xr-x 2 hunter staff 68B Jul 31 23:38 data
drwxr-xr-x 15 hunter staff 510B Aug 1 01:17 docs
drwxr-xr-x 2 hunter staff 68B Jul 31 23:38 layouts
drwxr-xr-x 4 hunter staff 136B Aug 1 01:12 static
drwxr-xr-x 4 hunter staff 136B Jul 31 23:44 themes
然后繼續在你的站點根目錄執行git 命令,添加遠程倉庫。
git remote add origin https://github.com/coderzh/coderzh.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master
然后設置你的github-pages
點擊生成的url看看博客是不是已經生成好了,注意如果沒生成好,你可以查看站點下的URL是否對應
baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"
若沒有對應,你需要修改你站點下的baseURL。
以下步驟以后修改站點內容,同樣的操作。
修改config.toml文件
baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"
然后在站點根目錄執行Hugo
命令
Hugo
接下來執行git命令
git add .
git commit -m "fix:BaseUrl"
git push
好了,再來查看你的博客地址https://haiteng-wang.github.io是不是生成好了?
(文章語言,沒有采用中性詞語,且很多大白話。半夜兩點了實在困傻了。原諒我沒有好好整理。)
后續:
如果成功生成GitHub Pages,但是生成后是這樣的
那我們就直這樣嘍
$ cd docs
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
如果,您發現文章中,有待梳理,寫的不清除的地方,或有更好的補充建議。歡迎評論我,或聯系我。