博客搭建步骤

第一步 安装 Hugo

Hugo 创建一个站点框架:

hugo new site blog

接下来的操作,我们将在刚创建的 site 目录里执行所有的命令。

cd site

新创建的站点目录结构如下:

  ▸ archetypes/
  ▸ doc/content/
  ▸ data/
  ▸ layouts/
  ▸ static/
    config.toml

第二步 安装 hugo-theme-meme 皮肤

安装MemE

~ $ cd site
~/site $ git init
~/site $ git submodule add --depth 1 git@gitee.com:yize521/hugo-theme-meme.git themes/meme

开始写作

将 config.toml 替换为示例配置

~/site $ rm config.toml && cp themes/meme/config-examples/zh-cn/config.toml config.toml

新建一篇文章和一个关于页面:

~/site $ hugo new "posts/hello-world.md"
~/site $ hugo new "about/_index.md"

启动服务

~/site $ hugo server --theme=meme --buildDrafts
--theme 选择哪个皮肤;
--buildDrafts 由于想显示我们的内容,包括设置了 draft 草稿状态的内容。

第三步 往服务器上部署

cd 到根目录下载 .gitmodules 中的子工程

git submodule update --init

启动服务

nohup hugo server --theme=meme --buildDrafts --bind=0.0.0.0 >> print.log 2>&1 &

--disableLiveReload=true 去掉页面上实时加载的livereload.js(ws反向代理没有配置成功 不指定此选项websocket发送的域名后边会拼接上端口好1313导致 控制台报错websocket连接失败)

域名解析到对应的1313端口

域名直接解析到对应的服务器iP 所以采用nginx代理到hugo服务 nginx配置如下:

server
{
    server_name www.lizesheng.work;
    
    #代理到本机的1313 hugo服务的端口
    location / 
    {
        proxy_pass http://localhost:1313;
    }
    
    access_log  /www/wwwlogs/www.lizesheng.work.log;
    error_log  /www/wwwlogs/www.lizesheng.work.error.log;
}