Featured image of post 搭建个人博客网站——hugo

搭建个人博客网站——hugo

使用hugo来搭建个人博客,并且部署到github

搭建博客流程

  首先如果是正常的搭建博客,是需要写一个博客的后端和前端界面的,然后需要代理服务器或者云服务器去进行部署,再去购买一个域名作为你网站的标识,这样子就是动态的,其实就是程序在跑,这种并不太适合非程序员的小伙伴来做,而且后端部分的代码的复杂程度还要根据你的功能需求来决定,感兴趣的人可以尝试尝试,这一套流程搞定了整个后端开发也就熟悉不少了。

hugo框架

  hugo是一个基于go语言开发的个人博客框架,相对于之前和热门的hexo来说更简单操作,也同样是使用markdown来个编辑文章内容,这里将介绍一下如何使用hugo来搭建个人的博客网站。

本地预览

一、安装hugo

  如果你是mac系统的话,mac系统直接使用brew来安装就可以了。如果是windows,可以 点击此处 去github直接下载,可以选择适合你系统的版本进行下载,下载下来是一个指令,windows记得要添加环境变量。

1
% brew install hugo

  然后通过hugo version来查看是否安装成功和你的hugo版本。

1
% hugo version

  如果是上图的样子就说明已经是安装成功了。接下来需要新建一个站点,是我们整个blog存放的位置。

1
% hugo new site blog

二、渲染博客网站主题

  我们cd blog,之后的操作都在这个目录下,通过ls -l查看一下我们新建的这个站点里面初始都有些什么文件。

  接下来就是需要给博客网站一个主题,我们可以 点击此处 去官方网站下载自己喜欢的主题,直接拿来用。点进去一般都有安装教程,用git clone将主题下载到我们本地/themes里,如果git clone不行的话,可以去主题的github仓库,下载zip文件,解析后放在当前目录的/themes文件下,直观一些看就是这样。

  我们下载下来的主题都会提供一个example或是/exampleSite这样的文件夹,可以看该主题的默认介绍和展示效果,亦或者可以在hugo主题官方上看到他的demo,这里我们就在本地查看一下。这里我下载了minima这个主题来举例子,首先我们把当前目录的config.toml名字先改了,我改成config_orginal.toml,然后把我们下载下来的文件里的/exampleSite所有内容复制下来,粘贴在当前目录,(有的还需要复制/archetyoes下的文件,具体看是否有多余的内容),而且还要查看一下config.toml这个文件里disqusShortname的值,然后修改我们下载下来的主题文件名为这个值,最终效果如下:

三、本地运行博客网站

  接着我们就可以用hugo server -t hugo-minima --buildDrafts来在本地预览我们的博客网站了,命令里的hugo-minima是刚才我们修改过的主题文件名。

1
% hugo server -t hugo-minima --buildDrafts

  当界面如下面这样子,就说明已经在本地运行成功了。

  我们打开浏览器,在输入localhost:1313或者127.0.0.1:1313查看我们的博客预览界面。想要具体修改和发布我们的文章呢就在/content文件下添加修改.md文件就可以了,其他的一些配置和功能可以在当前目录下的config.toml和主题文件下下的/layouts中的.html文件修改。

部署github

  只单单在本地预览肯定是不够的,我们需要一个服务器可以部署我们的网站,这里github提供了很方便的部署方法。首先在我们自己的github账号下新建仓库New repository,这里要注意的是Repository name,这个取名必须是你自己的github名称,还需要全部小写,然后加上后缀,比如我这里就是zonzeeli.github.io

  创建好之后接下来的操作就是基本的git操作了,这个不熟悉的同学可以去了解一下基本的步骤就可以,并不是很难,这里也简单介绍一下,另外要注意提前把config.toml配置文件中的baseUrl修改成如命令行中一样的地址。

1
% hugo --theme=hugo-minima --baseUrl="https://zonzeeli.github.io"

  这个命令操作后,会在当前目录下生成一个/public文件,这时候我们就要进入该目录cd public,然后执行git init

  接着就在这个/public目录下,git add .git commit -m "myblog init"git remote add origin https://github.com/ZonzeeLi/zonzeeli.github.io.git ,上面这条命令会要求输入github的账号和密码,最后在git push -u origin master这一步推流到github上。其中"myblog init"可以自定,原地址也填自己仓库的https地址。下面是git具体输入过的git命令。

  这一切操作完我们就将博客部署到了github上了,直接输入我们之前的baseURL就可以进入到我们的博客了。

comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy