前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >K哥用Github做了个免费永久博客,超详细过程!

K哥用Github做了个免费永久博客,超详细过程!

作者头像
Python进击者
发布2021-07-09 10:23:30
8410
发布2021-07-09 10:23:30
举报
文章被收录于专栏:JAVAandPython君

大家好,我是kuls。

最近自己阿里云服务器过期了,也没打算继续续费。

所以准备重新建个博客给自己用用,下面就是我目前搭建的博客(内容还没完善)。

这次使用的是hugo来生成静态网页。

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

今天K哥会带着大家完完整整,一步一步的完成一个hugo的生成和部署。

这里我们部署直接放至github,免费!

咱们开始第一步

我们需要先下载hugo,这里给大家地址,大家找到自己电脑相对应的版本进行下载就行了。

https://github.com/gohugoio/hugo/releases

当然,如果你是macOS用户,你可以直接通过brew来进行安装

代码语言:javascript
复制
brew install hugo

安装完成,进入第二步

我们需要新建一个站点

代码语言:javascript
复制
hugo new site myblog

其中myblog可以自定义名称,当执行该命令后,系统会创建一个名称为myblog的文件夹

代码语言:javascript
复制
Kulss-MacBook-Pro:kulsblog kuls$ hugo new site myblog
Congratulations! Your new Hugo site is created in /Users/kuls/Desktop/kulsblog/myblog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

执行命令后,命令行会返回上面信息。

这个时候,你的博客就已经生成了。

然后,我们执行

代码语言:javascript
复制
hugo server

运行我们的博客,但是此时你会发现网页里一片空白。

这是因为,我们要选定一个主题并且进行hugo配置的修改。

下面就进行第三步,选择博客主题

其实hugo有非常多的主题,具体大家可以访问下面的链接

https://themes.gohugo.io/

这个是官方给出的主题模板网站,

这里我使用的主题是Diary,一个很简洁的博客主题,链接也扔给大家

https://github.com/amazingrise/hugo-theme-diary

如何把主题配到我们网站呢?

首先进入到我们网站的目录中

我们可以看到有个themes的文件夹,我们使用命令行进入该目录

代码语言:javascript
复制
cd themes/
git init
git submodule add https://github.com/AmazingRise/hugo-theme-diary.git diary

git submodule add 主题的git地址 diary(主题名称)

这里给大家解释一下submodule,其实从单词角度来看,可以看出是子模块的意思,这里K哥也不过多解释,其实就是方便git的管理。

把主题克隆到themes文件夹后,我们来进行主题的配置:

打开config.toml

修改theme = "diary",diary就是你主题名称。

然后,我们可以通过

代码语言:javascript
复制
hugo new posts/my-first-post.md

生成一篇文章,测试一下博客,关于hugo的基本设置,这里不过多说,点赞数多,下篇文章来仔细讲讲。

到了这里,本地博客已经建立,下面我们即将部署到github上

首先,我们得先通过hugo来生成一下静态网站的文件。

我们直接进入myblog文件夹,输入下面命令

代码语言:javascript
复制
hugo

我们就会发现,在根目录中多了一个public的文件夹

我们就需要将这个文件夹中的内容部署到我们的github上。

下面大家看仔细啦!

进入github,新建一个仓库

按照下面的方法来创建

创建后,进入仓库的settings

创建完后,我们就会看到新建的仓库多了个文件

此时,我们就已经成功创建了一个仓库,接下来要做的就是将public文件夹中的文件上传到github。

对了,在我们生产public文件夹之前,我们需要将config.toml中的几个参数进行修改

baseURL = "https://hellokuls.github.io/"

theme = "diary"

以上两个参数都改成你自己的,然后再执行hugo命令。

接下来我们需要将_config.yml、README.md这两个文件下载到本地,并且复制到public文件夹中,这样方便我们进行push。

代码语言:javascript
复制
$ cd public
$ git init
$ git remote add origin 你的仓库git地址
$ git add -A
$ git commit -m "first"
$ git push -u origin master

我们进入master分支,可以看到已经上传成功了。

接着我们再次去到settings的page设置页面。

将其设置成master,root。

最后我们访问自己的https://hellokuls.github.io/,就能够看到博客页面啦。

整体的过程就是上面这样,如果遇到错误,别慌,你可以加K哥微信(在文章底下)。

关于hugo博客的使用、设置等方法,如果在看数多,我会马上更新!

今天的文章就到这啦

我们下期见!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Python进击者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档