根据⽂件夹内图⽚⾃动⽣成html⽂件_使⽤了静态⽹页⽣成
器:从WordPress到
2020.10.6 增补:⼜换回了 Hugo,使⽤ Github 和 Netlify 托管,真⾹。
----- 以下是原⽂ ------
之前⽴过⼀个flag,说并不会把博客变为静态的,依然使⽤wordpress作为博客的主⼒。但是基于考试考完闲着蛋疼、⽆穷⽆尽折腾的原则,准备试试静态博客,也就是分别尝试了两个静态⽹页⽣成器:hexo和hugo。在使⽤两者之前就有将两者进⾏过对⽐,前者基于node.js、后者基于golang,在对⽐了种种优缺点之后决定还是选择wordpress 。不过还是对⽐出来⼀点东西的,个⼈倾向于hugo。
本⽂的⽬录(仅供参考之⽤,点了会跳转到原⽂):
本⽂的⽬录
1. 尝试
2. 静态博客最快速上⼿
3. 安装 hugo
4. ⽤ hugo 创建第⼀个新⽹站
5. 给⽹站增加⼀点内容
1. 写第⼀篇⽂章
2. 或者复制粘贴你的 markdown ⽂件
6. 预览和上传站点
1. 上传并部署站点
1. 使⽤ FTP
2. 使⽤ Git
7. 杂项的配置
1. 内容摘要
2. 永久链接配置陈小春资料
3. 新建页⾯
4. 更改字体
5. 增加百度、⾕歌统计
6. 显⽰数学公式
开票证明7. 显⽰⽬录
8. 增补
尝试
但是,最明显的优点在于:hugo在构建过程中更快、hexo使⽤⼈数更多资源更丰富。作为新⼿的我,先⽤中⽂资源多的hexo搞了⼀遍,成功了之后换了⽆数套hexo主题没有太满意的,于是打算⾃⼰改⼀下主题。但是看到那些主题⽂件稍微有点懵,主题⽂件的后缀名千奇百怪:有些主题⽤了.ejs、有些主题⽤了.pug。
反正也很好查,pug就是jade⽂件——⼀种通过缩进的⽅式来编写代码的过程、可以和html相互转换。但是不巧的是,我那套主题把pug代码⽂本放到那种html转换器,并不能很好地转为html代码、直接修改这些⽂件⼜废眼睛(像在改⼀团乱码)。这种糟糕的体验很容易会使⼀个懒⼈放弃,于是我拿着⼀堆md⽂件正式投奔hugo的怀抱。
静态博客最快速上⼿
如果你有⼀个虚拟主机或者服务器,服务器搭建好了环境或者⾯板(⽐如:宝塔⾯板),那么你就可以在⾃⼰的本地电脑上⽣成⼀堆⽹页静态⽂件:⽐⽅说html、css、图⽚等等,然后⼀股脑地传到⾃⼰地虚拟主机上。绑定域名、解析域名、打开⽹址,⽹站建成了。
在上段所述过程中,最需要讲地就是“⽣成⼀堆⽹页静态⽂件”,本篇讲的就是这个步骤。有了这堆静态⽂件,⽹站=完成。
安装hugo
安装hugo可以直接点击hugo的快速⼊门,在windows中安装hugo。
我的环境是windows,选择的安装⽅法是Chocolatey (Windows),步骤如下:
1. ⽤管理员⾝份打开windows中的Windows PowerShell(命令提⽰符)。(windows中搜索powershell,右键“⽤管理员⾝份运
⾏”)
2. 复制下⽅代码,然后执⾏
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityPr
1. 输⼊choco,查看是否安装成功。
如何将excel转换成word2. 复制下⽅代码,然后执⾏
choco install hugo -confirm
1. 安装完毕
⽤hugo创建第⼀个新⽹站
1. 这时候可以关闭powershell了,在想新建⽹站⽂件夹的路径下打开cmd,例如: C:Users⽤户名 。(路径随意,按照个⼈喜好决定)
2. 在cmd中,复制下⽅代码,然后执⾏(quickstart可以替换为⾃⼰的⽹站名,英⽂字母)
hugo new site quickstart
1. 上述操作会在 C:Users⽤户名 中创建⼀个名为"quickstart"的⽂件夹。打开这个⽂件夹会发现⼀些熟悉的⽬录,⽐⽅说theme⽬录⾥⾯
放的是主题、content⾥⾯放的就是markdown⽂件等等。
2. 下⼀步增加⼀个主题,这⾥推荐MemE主题,⾸先在CMD中打开博客所在⽂件夹:
cd /d C:Users⽤户名quickstart
先⽹上搜索git,安装⼀下(都选择默认选项)。然后在⽼地⽅CMD中输⼊:
git init
git submodule add github/reuixiy/hugo-theme-meme.git themes/meme
1. 替换l⽂件,即将这个链接的所有内容复制粘贴到 C:Users⽤户名quickstart ⽂件夹下的l⽂件中。(怎么打开奇怪
后缀名的⽂件?推荐使⽤notepad++或者visual studio code)
2. 配置l⽂件。对于MemE主题,该⽂件的配置说明极其详细,按照⽂件中说明修改即可。
给⽹站增加⼀点内容
写第⼀篇⽂章
联想笔记本光驱1. 还是在⽼地⽅CMD中打开博客所在⽂件夹:
cd /d C:Users⽤户名quickstart
江蕙个人资料1. 输⼊下⽅代码,my-first-post可以修改成任意想要的内容,甚⾄中⽂:
hugo new posts/my-first-post.md
1. 在 content/posts ⾥到刚才新建的markdown⽂件,尽情写作吧。(什么是markdown?语法是什么?)在⽂章的开头(被称
为Front Matter,⽤于⽂章⽣成的⼀些控制)会⾃动⽣成下列部分字段,这⾥可以根据⾃⼰需要修改为:
---
title: "My First Post" #⽂章标题
description: ⽂章的描述信息
keywords:
- post
- blog
date: 2019-03-26T08:47:11+01:00 #⽂章建⽴时间
lastmod: 2019-03-26T08:47:11+01:00 #⽂章最近修改
draft: true #是否为草稿,false则不是草稿、会发布
slug: my-first-post #⽂章别名,⽤来做永久链接,下⽅会详细说明
tag: #⽂章的标签
- 第⼀个tag
- 第⼆个tag
-
第n个tag
categories: #⽂章的⽬录
- 第⼀个category
- 第⼆个category
- 第n个category
---
或者复制粘贴你的markdown⽂件
1. 将⾃⼰所有的markdown⽂件放⼊posts⽂件夹中即可。
2. 将原来wordpress中uploads的图⽚放⼊content⽂件夹下。
3. ⽤python批量将原有的图⽚链接替换为相对路径:完整代码下载,请点击这⾥,搜索⽂件名为20200126-
hugo_changes_urls_of_images.py的⽂件。
data = re.sub('d/wp-contents', '', data) # 修改此处代码,即将'd/wp-contents'替换为空。
if __name__ == '__main__':
top = r'C:Users⽤户名quickstartcontentposts' # 修改此处,更变为你的blog⽂件夹
modify_md_content(top)
预览和上传站点
输⼊命令hugo server 启动本地服务器(使⽤浏览器打开⽹址localhost:1313/即可预览),加上 -D 可以渲染 draft。
输⼊命令hugo ⽣成站点静态⽂件,⽣成的静态⽂件保存在public⽂件夹中。
上传并部署站点
安装宝塔⾯板(更⽅便管理)、环境;解析域名;绑定域名等操作可以查看这篇⽂章:⽹站⼜搬迁啦:顺便说⼀说使⽤腾讯云服务器搭建博
已安装宝塔⾯板、已在⾯板中添加完⽹站为前提。
客和wordpress备份迁移。下⽅的两条⽅法均以已安装宝塔⾯板、已在⾯板中添加完⽹站
2020.10.6 更新:推荐使⽤ Netlify !
使⽤FTP
张译老婆是谁上传站点先⽤个傻⼀点的办法:将public⽂件夹中的所有⽂件打包,这⾥推荐使⽤格式进⾏打包。之后可以通过宝塔⾯板或者ftp传⾄服务器,然后解压即可。(缺点:传输速度慢、速度慢、速度慢;但是每次可以不将uploads⽂件夹打包,图⽚单独传。)
使⽤Git
在github新建⼀个⾃⼰blog的仓库,并将⾃⼰博客⽂件下的所有内容上传⾄github,就像左边的链接那样。获取像这样的项⽬地址:github/0sheldonhuang0/hxdred_blog.git。
在服务器端(以CentOS为例)安装Git:
yum install git
在服务器端打开站点⽂件夹。在宝塔⾯板中,⼀般为/www/wwwroot/<;你设置的⽹站名称或⽂件夹>:
cd /www/wwwroot/<;你设置的⽹站名称或⽂件夹>
从github克隆或者拉取最新的内容,例如:
发布评论