共计 2384 个字符,预计需要花费 6 分钟才能阅读完成。
集体博客是展现本人经验或成就的现实场合。把个人简历、一些十分酷的小我的项目或生存体验写到博客里是一种十分棒的感觉。
一些喜爱写博客的小伙伴必定想过,要是有一个属于本人的博客网站就好了。
所以,本篇文章的目标就是和大家分享一种本人入手搭建博客的计划:Hugo + Github pages
介绍
在入手搭建之前,有必要给小伙伴们介绍 Hugo 和 Github pages 别离是什么。
Github 想必大家不生疏了,它是寰球最大的同性网站。托管集体、团队或组织的我的项目。
Hugo 是一个用 Golang
写的动态网站生成器,非常简单、高效,而且易于扩大。你能够用它更换不同的主题,生成动态博客网站,配合 Github pages,寰球各地的网友都能够拜访到你的网站。
以下的站点用 Hugo 和 Github pages 搭建,上面介绍部署过程。
step1. 申请一个 Github 仓库
1. 注册 Github
如果已有账号,间接登录
2. 理解 Github page 创立过程
进入 Github Pages 官网,理解创立过程。
3. 创立仓库
- 点击
Github
右上角头像旁边的 “+”, - 点击
New repository
进入创立仓库页面 -
输出仓库名称,如下图:
留神:仓库名的格局为 <username>.github.io,username 是你
Github
的账号名。 - 点击页面最下方的
Create reporitory
即创立胜利 - 拜访
https://<username>.github.io
看看是否可能拜访胜利
step2. 装置 Hugo
Hugo 有多种装置形式,具体怎么装置要看你的电脑系统。
Hugo 官网装置指南
我的电脑是 win10 零碎,能够下载 exe
文件间接装置即可,也能够下载源码编译装置。
这里 win10 源码编译过程:
-
克隆文件到本地
$ git clone https://github.com/gohugoio/hugo.git
-
装置
$ cd hugo $ go install
-
编译成
exe
文件$ go build -o hugo.exe main.go
- 将
hugo.exe
增加到环境变量中
将hugo.exe
挪动到你想放入的文件中,例如我将该文件放到D:\software\Hugo\bin
文件中,在零碎变量path
中增加该目录即可 -
测试 Hugo
$ hugo version hugo v0.94.0 windows/amd64 BuildDate=unknown
step3. 构建本地站点
1. 新建 Hugo 站点
进入你想寄存 Hugo 的目录,执行以下命令:
# blog 是站点名称
$ hugo new site blog
新建胜利后,进入 blog
目录,能够看到目录构造:
目录解析:
config.toml
: 咱们须要更改的配置文件content
: 寄存所有的博客文章static
: 存储动态文件,例如背景图片,徽标,CSS
,JS
等。此目录中的文件将间接复制到/public
中。该文件夹的优先级高于主题下的/static
。themes
: 寄存下载的主题archetypes
: 存储的.md
模板文件,其优先级高于theme
文件下的/archetypes
文件。layouts
: 寄存.html
模板,优先级高于theme
文件夹下的/layouts
文件夹public
: 在执行hugo
命令后,生成的动态文件寄存的目录
step4. 抉择 Hugo 主题
进入 Hugo 主题官网,抉择一个你喜爱的主题。
以 KeepIt 主题为例。
执行以下命令:
$ cd blog
$ cd themes
$ git clone https://github.com/Fastbyte01/KeepIt.git
下载实现后,批改 config.toml
文件,批改之前的内容如下
# blog/config.toml
baseURL = "http://example.org/"
languageCOde = "en"
title = "Hugo Site"
咱们进入刚刚下载的主题 Github 仓库,进入 exampleSite 文件中,能够看到开发者曾经给咱们提供里示例,能够间接复制过去。
复制过去的局部内容如下:
baseURL = "https://[your github username].github.io/"
languageCode = "en"
defaultContentLanguage = "zh-cn"
title = "StrideDot"
theme = "KeepIt"
留神:将 [your github username] 改成你的 Github
用户名。
step5. 创立第一个博客
装置过程实现了,当初终于能够创立咱们的第一个博客了。
$ cd blog
$ hugo new about.md
留神:须要去掉 about.md
文件中的 draft=true
,否则站点有效。
测试站点:
$ hugo server
在浏览器中输出 http://localhost:1313
,回车,页面将咱们刚刚下载的主题显示进去了。
step6. 部署到 Github
后面的装置和测试都是筹备工作,咱们的目标是将 markdown
语法生成动态文件,并公布到咱们刚刚申请的仓库中。
执行如下命令:
$ cd blog
$ hugo
进入 public
目录,咱们看到 Hugo 帮咱们生成了一大堆动态文件。
当初咱们把这些动态文件推送到在 step1 申请的 stridedot.github.io
仓库中
$ cd public
$ git init
$ git add .
$ git remote add origin https://github.com/username/username.github.io.git
$ git commit -m 'first commit'
$ git push -u origin main
刷新 Github
仓库,能够看到文件曾经推上去了。
到当初,咱们的站点曾经胜利公布。
在浏览器中输出 https://stridedot.github.io
,看到的页面跟咱们在本地的一摸一样。
以上即是创立集体博客的整个过程,感兴趣的小伙伴们连忙试试吧!!!