美文网首页technology
手把手教你通过Hugo搭建个人博客

手把手教你通过Hugo搭建个人博客

作者: HunterDude | 来源:发表于2017-08-01 02:10 被阅读1794次

    前言:

    做为一枚立志成为武林高手的程序员,怎么可以没有属于自己的一片园子呢。

    一直想搭建一个博客,但是始终没开始搞。近期没事,今天必须把这个事儿搞定。

    HEXO+Github 快速、简洁且高效的博客框架
    Jekyll+GitHub 将纯文本转换为静态博客网站
    FarBox The Best Blog Platform for Humans
    Hugo Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

    用过HEXO的部分人,现在都转用Jekyll。
    用过Jekyll的人呢,现在又转用FarBox。
    还有些用过Jekyll的兄弟们,现在转用Hugo
    FarBox是需要自己掏点腰包,对于我个屌丝来说。暂不考虑。
    那对于Hugo,是我最佳选择。

    如果有兄弟想将Jekyll的文章迁移到HugoHugo可以一键迁移Jekyll


    快速开始

    使用默认的Ananke皮肤创建一个Hugo站点

    在这个示例中使用macOS系统, 其它系统怎么进行快速开始,看安装

    您还需要安装Git才能运行本教程。

    第一步 导入Hugo

    HomebrewmacOS的软件包管理器,可以从brew.sh安装。 如果您正在运行Windows等,请参阅安装

    brew install hugo
    

    验证您Hugo安装成功:

    hugo version
    

    第二步 创建一个新站点

    在名为quickstart的文件夹中创建一个新的Hugo站点。

    quickstart站点名字(建议起名字为yourName.com)

    hugo new site quickstart
    

    第三步 添加一个皮肤

    请参阅themes.gohugo.io以查看需要考虑的主题列表。 这个快速启动使用美丽的Ananke皮肤。

    cd quickstart;\
    git init;\
    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
    

    $ la themes/ananke #看下ananke库

    total 48
    -rw-r--r--   1 hunter  staff    41B Jul 31 23:40 .git
    -rw-r--r--   1 hunter  staff   331B Jul 31 23:40 .gitignore
    -rwxr-xr-x   1 hunter  staff   1.0K Jul 31 23:40 LICENSE.md
    -rw-r--r--   1 hunter  staff   4.0K Jul 31 23:40 README.md
    drwxr-xr-x   3 hunter  staff   102B Jul 31 23:40 archetypes
    drwxr-xr-x   5 hunter  staff   170B Jul 31 23:40 exampleSite
    drwxr-xr-x   4 hunter  staff   136B Jul 31 23:40 images
    drwxr-xr-x  10 hunter  staff   340B Jul 31 23:40 layouts
    -rwxr-xr-x   1 hunter  staff   500B Jul 31 23:40 package.json
    drwxr-xr-x   8 hunter  staff   272B Jul 31 23:40 src
    drwxr-xr-x   4 hunter  staff   136B Jul 31 23:40 static
    -rwxr-xr-x   1 hunter  staff   521B Jul 31 23:40 theme.toml
    
    注意看:

    ananke目录下有个示例站点exampleSite。我们用人家的库,当然得按人家的示例来操作。

    在下面,第四步 装饰你的站点 直接把示例站点中的staticcontent文件夹和config.toml文件,与自己站点中的staticcontent文件夹,和config.toml文件进行替换。

    static文件夹:存放图片
    content文件夹:存文章(xxxx.md)
    
    

    第四步 装饰你的站点

    cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/static ./ 
    cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/content ./
    cp /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/config.toml ./
    

    关于cp,命令这里不多说。

    你可以用命令行,将ananke的示例站点exampleSite下的文件,替换成自己的站点文件。当然,如果你愿意,可以手动替换。

    替换完毕后,你的站点下的staticcontent文件夹终于不是空的了。

    你的配置文件config.toml可不再只有几行命令,而是这样

    title = "Notre-Dame de Paris"
    baseURL = "https://example.com"
    languageCode = "en-us"
    theme = "gohugo-theme-ananke"
    themesDir = "../.."
    
    MetaDataFormat = "yaml"
    DefaultContentLanguage = "en"
    SectionPagesMenu = "main"
    Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number
    googleAnalytics = ""
    enableRobotsTXT = true
    
    [sitemap]
      changefreq = "monthly"
      priority = 0.5
      filename = "sitemap.xml"
    
    [params]
      description = "The last theme you'll ever need. Maybe."
      facebook = ""
      twitter = "https://twitter.com/GoHugoIO"
      instagram = ""
      youtube = ""
      # choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
      background_color_class = "bg-black"
      featured_image = "/images/gohugo-default-sample-hero-image.jpg"
    
    
    注意:
    你需要删除这行: themesDir = "../.."
    
    你需要查看你的theme,theme = "ananke"
    

    然后,在你的站点根目录执行 Hugo 命令进行调试:

    hugo server -D
    

    浏览器里打开:http://localhost:1313

    目前为止: 你的站点已经创建完毕。

    关于装饰你的站点,自己随便改一改站点下的staticcontent文件,和config.toml配置文件看看发生了什么改变。

    第五步 部署 Host on GitHub

    如果你需要部署在 GitHub Pages 上。

    首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。

    然后修改config.toml

    publishDir = "docs"
    
    baseURL = "https://haiteng-wang.github.io/"
    

    然后,在你的站点根目录执行 Hugo 命令进行调试:

    hugo
    

    $ la
    你会发现你的站点下多了个docs文件夹

    -rw-r--r--@  1 hunter  staff   6.0K Aug  1 01:12 .DS_Store
    drwxr-xr-x  12 hunter  staff   408B Aug  1 01:17 .git
    -rw-r--r--   1 hunter  staff   108B Jul 31 23:40 .gitmodules
    drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 archetypes
    -rw-r--r--   1 hunter  staff   838B Aug  1 01:16 config.toml
    drwxr-xr-x   8 hunter  staff   272B Jul 31 21:55 content
    drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 data
    drwxr-xr-x  15 hunter  staff   510B Aug  1 01:17 docs
    drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 layouts
    drwxr-xr-x   4 hunter  staff   136B Aug  1 01:12 static
    drwxr-xr-x   4 hunter  staff   136B Jul 31 23:44 themes
    

    然后继续在你的站点根目录执行git 命令,添加远程仓库。

    git remote add origin https://github.com/coderzh/coderzh.github.io.git
    git add -A
    git commit -m "first commit"
    git push -u origin master
    

    然后设置你的github-pages


    Go to Settings → GitHub Pages From Source, select “master branch /docs folder”. If the option isn’t enabled, you likely do not have a docs/ folder in the root of your project. 部署成功

    点击生成的url看看博客是不是已经生成好了,注意如果没生成好,你可以查看站点下的URL是否对应

    baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"
    

    若没有对应,你需要修改你站点下的baseURL。

    以下步骤以后修改站点内容,同样的操作。

    修改config.toml文件

    baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"
    

    然后在站点根目录执行Hugo命令

    Hugo
    

    接下来执行git命令

    git add .  
    git commit -m "fix:BaseUrl"
    git push 
    

    好了,再来查看你的博客地址https://haiteng-wang.github.io是不是生成好了?


    (文章语言,没有采用中性词语,且很多大白话。半夜两点了实在困傻了。原谅我没有好好整理。)

    后续:

    如果成功生成GitHub Pages,但是生成后是这样的

    woho! 我们没得选择,默认让我在master分支上工作

    那我们就直这样喽

    $ cd docs
    $ git init
    $ git remote add origin https://github.com/coderzh/coderzh.github.io.git
    $ git add -A
    $ git commit -m "first commit"
    $ git push -u origin master
    

    如果,您发现文章中,有待梳理,写的不清除的地方,或有更好的补充建议。欢迎评论我,或联系我。

    相关文章

      网友评论

        本文标题:手把手教你通过Hugo搭建个人博客

        本文链接:https://www.haomeiwen.com/subject/ofpdlxtx.html