前言:
做为一个程序员,怎么可以没有属于自己的一个博客呢,更何况博客是自己的加分项。
一直想搭建一个博客,但是始终没开始搞。近期没事,今天必须把这个事儿搞定。
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。
快速开始
使用hello-friend-ng皮肤创建一个Hugo站点
在这个示例中使用
macOS
系统, 其它系统怎么进行快速开始,看安装
您还需要安装Git才能运行本教程。
第一步 导入Hugo
Homebrew
,macOS
的软件包管理器,可以从brew.sh安装。 如果您正在运行Windows等,请参阅安装
brew install hugo
验证您Hugo安装成功:
hugo version
第二步 创建一个新站点
在名为quickstart的文件夹中创建一个新的Hugo站点。
quickstart
站点名字(建议起名字为yourName.com)
hugo new site quickstart
第三步 添加一个皮肤
请参阅themes.gohugo.io以查看需要考虑的主题列表。 这个快速启动使用简洁高逼格的hello-friend-ng皮肤。
cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-hello-friend-ng.git themes/hello-friend-ng;\
$ la themes/hello-friend-ng #看下hello-friend-ng库
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
注意看:
hello-friend-ng
目录下有个示例站点exampleSite
。我们用人家的库,当然得按人家的示例来操作。
在下面,第四步 装饰你的站点 直接把示例站点中的static
、content
文件夹和config.toml
文件,与自己站点中的static
,content
文件夹,和config.toml
文件进行替换。
static文件夹:存放图片
content文件夹:存文章(xxxx.md)
第四步 装饰你的站点
cp -R /Users/hunter/HaiTeng-Wang.com/themes/hello-friend-ng/exampleSite/static ./
cp -R /Users/hunter/HaiTeng-Wang.com/themes/hello-friend-ng/exampleSite/content ./
cp /Users/hunter/HaiTeng-Wang.com/themes/hello-friend-ng/exampleSite/config.toml ./
关于cp
,命令这里不多说。
你可以用命令行,将hello-friend-ng
的示例站点exampleSite
下的文件,替换成自己的站点文件。当然,如果你愿意,可以手动替换。
替换完毕后,你的站点下的static
、content
文件夹终于不是空的了。
你的配置文件config.toml
可不再只有几行命令,而是这样
title = "Notre-Dame de Paris"
baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-hello-friend-ng"
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 = "hello-friend-ng"
然后,在你的站点根目录执行 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
如果,您发现文章中,有待梳理,写的不清除的地方,或有更好的补充建议。欢迎评论我,或联系我。