开发程序员

Hugo +github 简单快捷搭建完成个人博客

2019-01-21  本文已影响246人  拾钱运

首先说一下Hugo是由go语言实现的静态网站生成器。简单、易用,高效,易扩展、快速部署。
github 不用说了,步入正题

首先要下载 hugo_0.53_Windows-64bit

然后创建文件 :D:gitHub/hugo/bin
D:gitHub/hugo/sites
将下载的hugo.exe 放在D:gitHub/hugo/bin目录中

然后就是配置环境变量 将hugo.exe 的目录编辑到Path 中 点击确定就可以了

验证是否 配置成功

hugo version
version.png

创建本地网站:在sites目录中打开 Git Base Here

hugo new sites blog  

创建完成之后的目录介绍:
|- archetypes 存放default.md ,头文件格式
|-content content 目录存放博客文章(.markdown/.md文件)
|-data 存放自定义模板,导入的toml文件(或json、yaml)
|-layouts layouts目录存放网站的网站模板文件
|-static 存放js/css/img 等静态资源
|-config.toml config.toml 是网站的配置文件

当前网站是没有任何内容的,需要下载主题并且创建一个文章才可以跑起来哦!

安装主题

Hugo官方主题:https://themes.gohugo.io/
这里我选用的是dream 主题,从github下载下来,将解压出来的文件放在thems文件夹中,

并且需要在创建dream 文件夹存放刚来下载下来的所有的文件。 下载主题的名字在图片的左下角 哦!
dream.png

包含以下文件:
|-archetypes 存放default.md 头文件格式
|-layouts 主题模板文件、
|-static 静态资源
|-themo.toml 主题配置文件

发表文章

hugo  new  post/test.md

可用文本文件或markdown 打开post/test.md 并增加点内容

---
date ="自动生成的创建时间"
title="test"
draft =true   //这里需要注意 要手动改成false  才能看到页面

生成静态网站

需要提前在github上建立一个Repositories 名字 起名为:你的github用户名.github.io 然后在文件夹的根目录中执行下面的这个命令,停,还没完,需要修改config.toml 中的baseUrl为 你创建的知识库名称 ,添加上刚才下载的主题:

theme="dream"
$  hugo  --theme=dream --baseUrl ="https://yourname.github.io"

所有的静态页面就会存放在一个叫public文件夹中 ,将github创建的repositories clone 下来 ,然后将public 中所有的文件放到 你clone 下来的文件夹中,提交到github上即可

Git 提交代码到github上

第一步 :

git  add .    //将所有的文件上传

第二步:

git  commit -m  "描述"

第三步:

git push -u  origin master   

完成 访问 https://youname.github.io 即可

我的博客:https://ZMQ222.github.io

上一篇下一篇

猜你喜欢

热点阅读