淘先锋技术网

首页 1 2 3 4 5 6 7

您诸位好啊,我是无尘。
身为一名技术人,怎么能没有一个属于自己的博客系统呢?难道要买一台云服务器?新用户还好,优惠力度不小,赶上个购物节,小几百就能买上几年的。然而非新用户就尴尬了,续费金额属实不便宜啊。
不卖关子了,说说今天的主角 Hugo,Hugo是由Go语言实现的静态网站生成器。可以将生成的静态页面部署到github。
准备工作:

  • 有github账号
  • 有安装 git
  • 会使用 markdown 编写文档
    身为技术人,我这里默认诸位已经准备好了,废话不多少,赶紧实战:

框架搭建

  1. Hogo框架下载地址 下载自己合适的安装包:

    我这里使用的是 windows-64,下载完成后,将安装包放到自己想安装的路径,解压即安装完成。如下图,只有简单的三个文件。
  2. 查看是否安装成功
    在刚才解压的文件夹里面(hugo.exe所在文件夹),以管理员身份打开 cmd 控制器,输入 hugo version,看到如下图,说明安装无误。

生成个人博客站点

  1. 在 hugo.exe 所在文件夹中,管理员身份打开 cmd 控制台,输入 hugo new site myblog ,此处 “myblog” 是你自己的站点名字,可以自行定义。
  2. 执行完上面命令后会在 hugo.exe 文件夹中生成 myblog 文件夹及相关文件。

主题下载

  1. 这里是 Hugo主题下载地址 ,你可以自行选择喜欢的主题,我这里以 Hugo.386 为例:

  2. 如果你电脑已经安装了 Git ,可以使用 git 来进行下载:

    • 打开 git bash ,切换到博客根目录(myblog文件夹中)
    • 执行 git clone https://gitlab.com/maxlefou/hugo.386.git themes/hugo.386
    • 下载完成后,主题在 myblog\themes\hugo.386 目录中。

    如果你还没有安装 git ,也可以直接下载安装包文件,然后在myblog\themes 中新建 hugo.386 文件夹(主题文件夹名),将安装包解压到此处即可。

  3. 一般主题都带有示例文件,例如我的这个主题:

    • 我们将 exampleSite 文件夹中的文件复制到博客根目录(myblog文件夹)中,直接覆盖替换。

    • 这里说明下,不同主题示例中的内容略有不同。在我们的博客站点中 myblog/content/post/xxx.md ,这里是存放你的文章的地方,我们这里把主题文章示例覆盖博客文章来预览。

    • config.toml 为配置文件,后续我们可以进行站点配置(博客地址、构建配置、标题、导航栏等等)。

  4. 在博客根目录(myblog),cmd 执行 hogo server --theme=hugo.386 --buildDrafts 来启动站点服务。

  5. 在浏览器中打开地址 http://localhost:1313/ 查看是否启动成功

    –theme : 指定主题

    –buildDrafts : 引入 content 中的草稿文件

    完美!

    我的主题遇到的错误:

    发现 content\post\rich-content.md 有问题,直接将此文件删除掉,重新构建 hugo server //这里是简写,因为配置文件里已经说明了主题使用哪个。

部署到 GitHub

  1. 登录你的 GitHub 账号,创建一个仓库,注意:创建仓库的名称必须是你github的昵称且必须小写再加上.github.io

    例如我的昵称是 wuchengshi,则输入 wuchengshi.github.io

  2. cmd 切换到根目录下(myblog), 运行 hugo --theme=hugo.386 --baseUrl="https://wuchengshi.github.io" --buildDrafts

  3. 会在博客根目录 myblog 生成 public 文件夹,里面就是编译好的静态页面文件。在public目录下:

    • 运行 git bash ,执行 git init将public文件夹变成 git 本地仓库
    • 执行git add .将文件夹所以文件放入暂存区
    • 执行 git commit -m "my hugoblog" 提交暂存区到本地仓库中
    • 执行git remote add origin https://github.com/wuchengshi/wuchengshi.github.io.git 添加远程版本库
    • 执行git push -u origin master 将本地仓库代码推送到远程库
  4. 最后,在浏览器中访问 https://wuchengshi.github.io/ ,即可看到自己的博客网站。

欢迎关注我的公众号“微客鸟窝”,有什么问题可与我沟通。