V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
The Go Programming Language
http://golang.org/
Go Playground
Go Projects
Revel Web Framework
mikemintang
V2EX  ›  Go 编程语言

基于「Hugo」搭建个人博客网站

  •  
  •   mikemintang ·
    idoubi · 2020-04-20 09:53:00 +08:00 · 6549 次点击
    这是一个创建于 1685 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    搭建个人网站,以前我们一般会选择 WordPress,因为其使用范围广(据说全世界 80%的网站都是用它搭建的)、主题丰富、上手简单。

    近年来,markdown 内容格式渐渐流行,我们更愿意使用 markdown 格式来写文章,写完后用静态网站生成工具把文章内容转换成 html 格式,再发布到个人网站。生成静态网站的工具中,比较优秀的有 JekyllHexoHugo 几个。

    综合来看,我还是比较推荐使用 Hugo 来搭建个人网站。

    安装 Hugo

    MacOS 系统下,可以使用 brew 来进行安装。

    brew install hugo
    

    安装完后,可以全局使用 Hugo 命令

    hugo version
    

    创建个人网站

    hugo new site myblog
    

    进入创建的 myblog 目录,可以看到生成的目录结构长这样:

    .
    ├── archetypes
    │   └── default.md
    ├── config.toml
    ├── content
    ├── data
    ├── layouts
    ├── static
    └── themes
    

    选择一个主题

    创建完网站之后,我们可以在 Hugo 官方的 主题商店 选择一个自己喜欢的主题,并下载下来使用。

    这里以 hugo-notepadium 这个主题为例,进入上一步创建的个人网站,并克隆主题到 themes 文件夹:

    git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
    
    .
    ├── archetypes
    │   └── default.md
    ├── config.toml
    ├── content
    ├── data
    ├── layouts
    ├── static
    └── themes
        └── hugo-notepadium
    

    修改网站配置

    修改站点配置文件 config.toml ,填写自己的网站信息和使用的主题名称,也可以根据 主题说明 里示例的配置信息来自定义网站内容。

    baseURL = "https://example.com"
    title = "MyBlog"
    theme = "hugo-notepadium"
    copyright = "©2020 my name."
    

    创建文章

    接下来我们可以开始写文章了,通过:

    hugo new posts/helloworld.md
    

    新建一篇文章。在生成的文件中使用 markdown 格式来书写文章内容。

    ---
    title: "Helloworld"
    date: 2020-04-19T23:56:47+08:00
    draft: true
    ---
    
    ## 说明
    
    > HelloWorld
    
    这是内容
    

    网站预览

    执行 server 命令,对所有已发布和编辑中的文章进行预览:

    hugo server -D
    

    发布内容

    写完文章,预览没问题后,可以更改文章的草稿状态 draft: false,然后编译生成静态网站内容了:

    hugo -t hugo-notepadium
    

    可以看到,几乎瞬间完成编译工作。生成的静态内容都在 public 目录下面:

    public
    ├── 404.html
    ├── categories
    ├── css
    ├── index.html
    ├── index.xml
    ├── page
    ├── posts
    ├── sitemap.xml
    └── tags
    

    部署到线上

    最简单的部署方式,只需要把 public 目录下的内容上传到 Github,并使用 Github Pages 创建一个站点,就可以通过:xxx.github.io 访问了,还可以绑定自定义域名。

    也可以自己写一个 shell 脚本,做到每次编译完文章后自动同步 public 目录下的内容到 Github 或者自己的服务器,来保持线上站点的内容及时更新。

    总结

    通过前面的步骤我们看到通过 Hugo 创建静态网站是非常方便的,并且发布前的编译速度也非常快。比起传统的动态网站,可能不足的地方在于没有可视化后台来随时新增或修改 markdown 内容,但是实际上也是可以做到的,我们可以选择开发自己的主题,在主题开发过程中,我们可以通过 getJSON 来获取 API 传递的动态数据,有了这个功能,说不定就可以很好的结合动态网站与静态网站的优势了。以后有时间再讲一下如何开发自定义主题吧。

    参考

    原文地址: https://idoubi.cc/posts/build-site-with-hugo/

    16 条回复    2021-01-16 11:50:14 +08:00
    samondlee
        1
    samondlee  
       2020-04-20 10:15:18 +08:00
    希望提供类似 gridea 的 Gui 客户端 WINDOWS/ANDROID/IOS/MAC 就更好了
    labulaka521
        2
    labulaka521  
       2020-04-20 11:31:43 +08:00 via Android
    你是否厌倦了每次写博客都要打开一个本地编辑器,是否厌倦了每次写完都要手动执行 hugo 命令而苦恼,使用了 https://github.com/labulaka521/yuque_sync 插件就可以让你在一个在线的编辑器,随处编写你想写的,随处记录你想记录的,写完立即发布到自已的 blog,还等什么快来试用吧🐶
    fantastM
        3
    fantastM  
       2020-04-20 11:43:09 +08:00
    我最近也把博客迁移到了 Hugo,不过根据自己的需求,加了挺多个性化配置...

    https://blog.fantasticmao.cn/2020/04/08/这个博客的构建和部署 /
    billzhuang
        4
    billzhuang  
       2020-04-20 11:54:11 +08:00
    我觉得 hugo+netlifycms 是很好的选择
    F7ionsy
        5
    F7ionsy  
       2020-04-20 12:09:38 +08:00 via iPhone
    hexo+travis+语雀微信小程序,完全可以实现手机编辑随时随地发布啊!
    dazkarieh
        6
    dazkarieh  
       2020-04-20 12:10:14 +08:00
    @billzhuang #4 netlify 访问贼慢,还不如 zeit
    opengps
        7
    opengps  
       2020-04-20 12:36:15 +08:00 via Android
    我正在做一个,比较简陋,有兴趣的同学可以找我提提意见
    Chenamy2017
        8
    Chenamy2017  
       2020-04-20 12:53:34 +08:00
    hexo 路过。
    Hanggi
        9
    Hanggi  
       2020-04-20 12:56:56 +08:00
    hugo + github page
    http://hanggi.me
    Kakarrot
        10
    Kakarrot  
       2020-04-20 14:09:20 +08:00
    Hexo + Github Page 路过
    u6pM63mMZ34z32cE
        11
    u6pM63mMZ34z32cE  
       2020-04-20 14:44:37 +08:00
    GastbyJS 路过
    deicol
        12
    deicol  
       2020-04-20 17:28:11 +08:00
    ianisme
        13
    ianisme  
       2020-04-20 23:02:05 +08:00
    wordpress 也可以 markdown 呀
    billzhuang
        14
    billzhuang  
       2020-04-21 09:05:41 +08:00
    @dazkarieh netlifycms 不等于 netlify,依然可以 host 在任意地方,只是方便更新
    yiplee
        15
    yiplee  
       2020-04-21 10:22:12 +08:00
    我也是用的 hugo,部署在 cloudflare worker 上面
    greenlake
        16
    greenlake  
       2021-01-16 11:50:14 +08:00
    谢谢,非常有帮助的一篇文章,看着你的文章架设了一个,确实很简单
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1509 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:10 · PVG 01:10 · LAX 09:10 · JFK 12:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.