Hugo

1. Hugo 学习路线 Hugo学习路线 1.1 基础    了解Hugo, 使用Hugo命令和Github, 搭建起来静态博客 Hugo和GitHub Pages搭建静态网站Li.004    了解一下常用hugo命令 Hugo常用命令Li.023    Hugo使用Markdown标记语言, Markdown语法学习是必要的, 仅有十几个标签 Markdown语法Li.002    找一个顺手的Markdown编辑器, 用来写作 Markdown编辑软件Li.003 1.2 进阶    解决Markdown图片存放问题 Hugo中Markdown图片资源存放几种方式Li.024 推荐存放在Github(2.1方式)上, 免费, 容易操作 1.3 难度    Hugo静态网站常用管理方式, 使用自有域名 Hugo静态网站常用管理方式Li.026 推荐方式1.2使用Github, 配置自己的域名, 免费    Hugo的Shortcode模板片段,插入视频, 定制网页 Hugo的shortcode(支持视频等)和主题修改Li.027 插入bilibili和YouTube视频, Hugo完全可以作为自媒体平台了

本篇文章属于Hugo学习路线Li.028一部分 1. Hugo的Shortcodes是什么? shortcode 是一些可以直接插入内容文档中的助记符，在Hugo 生成网站时，会将这些助记符替换为相应的HTML 代码片段（严格来说是模板片段) 2. 为什么需要Shortcodes. 虽然Markdown 支持html标签, 写起来相当麻烦, 碰到页面兼容性问题, 就得修改所有写了Html的Markdown文件, 想想都可怕 shortcode像如下, 类似特殊Markdown标记语言 显示效果    步骤, shortcode示例 可在Markdown中使用, 如果出现问题, 只需要修改模板片段即可. 3. Shortcodes 可以用来做什么, 嵌入视频之类, Hugo静态博客也能是自媒体. 3.1 可在网页嵌入视频, 常用网站Bilibili 和 Youtube.    在hugo网站目录layouts/shortcodes中创建bilibili.html文件 文件名称bilibili, 引用的时候也是相同名称 <style> .meta-media { position: relative; margin-bottom: 30px; display: flex; width: 100%; height: 0; padding-bottom: 75%; } .video { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } </style> <div class="meta-media"> <iframe src="{{ ....

1. 列表出全部方式 1.1 本地文章Hugo生成静态网站->上传Github, Github提供域名 1.2 本地文章Hugo生成静态网站->上传Github, 使用自有域名, 配置域名CNAME 1.3 本地文章Hugo生成静态网站->(rsycn)上传自己服务器上, 使用自有域名 1.4 本地文章Hugo生成静态网站->上传Github->(使用Github action)在服务器上拉取Github静态网站, 使用自有域名 1.5 本地文章Hugo生成静态网站->上传Github->(使用crontab 定时任务)在服务器上拉取Github静态网站, 使用自有域名 1.6 本地文章->上传服务器->服务器Hugo生成静态网站, 使用自有域名 1.7 服务器文章->服务器Hugo生成静态网站, 使用自有域名 2. 方式比较 方式 是否推荐 是否免费 更新及时 是否使用自有域名 难易程度(1最容易) 1.1方式 1.2方式 1.3方式 1.4方式 1.5方式 1.6方式 1.7方式 1.1方式(推荐), 免费, 更新及时, 会使用Hugo Git Markdown即可, 最简单的方式. 1.2方式(推荐), 除了1.1有的内容, 可使用自己域名. 1.3方式(推荐), 方式简单, 更新及时,会使用Hugo Markdown rsycn 配置ssh key即可 1.4方式(推荐), 自动化程序最高, 只需要上传到Github就可触发, 更新及时, 难度也稍微高点. 除会使用Hugo Git Markdown, 还需要使用Github action, SSH KEY配置. 1....

本篇文章属于Hugo学习路线Li.028一部分 1. Hugo中Markdown图片资源放在哪? 一直是个问题 引用其他资源担心其他网站改动路径, 就没了, 建立自己的网络图片资源库就显得很重要了. 存放Hugo的静态网站中, 引用起来不方便, 而且更新图片时必须更新网站, 强依赖. 所以一个独立的图片库就显示有必要了. 图片压缩也少不了. 2. 常用几种存放图片资源方式. Github 使用Nginx做为静态资源 自建私有云 自建图床 使用云存储服务. 2.1 Github或Gitee(国内理论理论速度更快) 公共项目存放图片资源. 这种方式只需要更新图片即可, 不需要更新静态博客, 管理更方便. 免费. 免费, 会使用git就可以. 也可使用图形界面PicGo上传图片到Github 示例, 复制文件下载链接即可在markdown使用 复制文件下载链接即可在markdown使用  2.2 静态博客存放在Github, 图片也存放在同一项目下. 免费. 免费, 会使用Git 如果存放在Hugo文件夹中static中, 虽然文件生成在项目根目录下, 但在Github上地址从baseUrl开始的 # 图片存放在static文件夹下 https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/static # 图片地址起始https://adityatelange.github.io/hugo-PaperMod/  单个图片,如果有文件夹则添加 2.3 使用Nginx或其他服务器做静态资源. Nginx安装参考地址 , 付费, 需要服务器. Nginx default.conf配置 使用sftp上传图片到服务器的s.lizicai.com文件夹下即可 server { listen 80; server_name s.lizicai.com; return 301 https://s.lizicai.com$request_uri; } server { listen 443 ssl; server_name s....

本篇文章属于Hugo学习路线Li.028一部分 Hugo 常用命令. 官网参考地址 # 查询所有命令 hugo -h # 创建Hugo 静态网站 hugo new site mywebsite # 创建文章, 当前必须mywebsite下才可创建文章 # 创建的文章存放在 mywebsite/content/p/test.md下 # 使用命令创建的hogo可以监控到, 实时显示到预览上 hugo new p/test.md # 启动服务, 必须在mywebsite文件夹下启动 hugo server # 草稿也预览, -D 参数, 必须在mywebsite文件夹下启动 hugo -D server # 指定预览的主题, 必须在mywebsite文件夹下启动 # papermod是在themes文件夹下的主题名称 hugo -D server --theme=papermod # 指定预览的端口 hugo -D server --port=1313 # 指定服务绑定在哪个端口, 比如你想在手机预览, 电脑手机同一局域网时 # 电脑ip 192.168.1.20, 手机访问192.168.1.20就能看到预览 hugo -D server --bind="192.168.1.20" --port=80 # 指定预览的默认地址, http://192....

Hugo是一个用Go 编写的静态网站生成器. GitHub Pages是GitHub提供的一个网页寄存服务， 于2008年推出。可以用于存放静态网页，包括博客、项目文档甚至整本书. Hugo和Github Pages组合就可以免费创建博客网站. 本篇文章属于Hugo学习路线Li.028一部分 1. 安装Hugo, Hugo仅需一个可执行文件, Hugoe支持Windows Mac Linux平台. 1.1 Windows安装.    创建三个文件夹 创建一个新的文件夹，D:\Hugo。 创建一个新的文件夹，D:\Hugo\bin。 创建一个新的文件夹，D:\Hugo\Sites。    下载Hugo执行文件, 解压存放到D:\Hugo\bin\中 下载Windows版本的 Hugo 解压出文件, 文件复制到D:\Hugo\bin中.    把PATH=PATH%;D:\Hugo\bin添加到Windows环境变量中    检查正确运行 打开Power Shell hugo version 显示hugo版本就是正常. 1.2 Mac直接使用brew install hugo, Brew安装 . brew install hugo 1.3 linux下载文件并移动到/usr/local/bin/下即可, Mac也可以使用这种方式(Hugo版本Mac OS).    下载Linux 64版本Hugo Hugo下载地址    解压出hugo文件,移动hugo到/usr/local/bin/文件下 # 以0.85版本为例 wget https://github.com/gohugoio/hugo/releases/download/v0.85.0/hugo_0.85.0_Linux-64bit.tar.gz tar xvf hugo_0.85.0_Linux-64bit.tar.gz mv hugo /usr/local/bin/    检查正确运行 hugo version 显示hugo版本就是正常....

本篇文章属于Hugo学习路线Li.028一部分 1. Windows Mac Linux全平台支持的工具. MarkText, 免费开源, 支持Mac Windows Linux. MarkText Visual Studio Code, 开源, 免费, 全平台支持(Windows Mac Linux). Visual Studio Code Sublime Text 4, 收费, 全平台支持(Windows Mac Linux) Sublime Text 4 插件sublime-markdown-extended Atom, 开源, 免费, 全平台支持(Windows Mac Linux). Atom 插件Markdown Preview Vim 开源 免费 全平台支持(Windows Mac Linux). Vim vim插件tpope/vim-markdown 2. Mac iPhone iPad 端工具. MarkText, 免费开源, 支持Mac Windows Linux. MarkText Ulysses 付费 (支持平台Mac iPhone iPad). Ulysses iA Writer 付费 (支持平台Mac iPhone iPad)....

本篇文章属于Hugo学习路线Li.028一部分 Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档， 然后转换成有效的XHTML文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。 Markdown文件类型结尾是.md或.markdown形式. 优点: 简单 统一(写一次任何地方显示一致) 支持网站平台多(Github Gitlab Wordpresse 知乎 简书等) 编辑软件推荐: Typora 和 MarkText 更多应用 1. 标题 # 标题1 ## 标题2 ### 标题3 #### 标题4 ##### 标题5 ###### 标题6 标题1 标题2 标题3 标题4 标题5 标题6 2. 图片与链接. [知乎](https://zhihu.com)  #目录路径,访问的当前网站根目录下的图片.   知乎 3. 段落 段落一 没有空行, 仍然是段落一 空一行就是段落二 段落一 没有空行, 仍然是段落一 空一行就是段落二 4 列表. 有序列表与无序列表. 4.1 有序列表 1. 有序列表一 2. 有序列表一 3. 有序列表一 有序列表一 有序列表一 有序列表一 4....