Hugo

本动态站点用于演示之用，应用 Hugo 构建，以及 Markdown 供给内容。

Vercel 能够依靠 Git仓库 ，在线主动构建和公布Web动态我的项目，反对自定义域名，能够主动签发SSL证书，开启HTTPS，还有一个特点，领有寰球CDN，国内速度不错。 反对多套框架和模版，如：Hugo、Jekyll、Hexo、Next、Vue… 注册账号通过Git仓库账号关联注册，如果注册中呈现谬误，查看下账号是不是QQ邮箱。Vercel不反对QQ邮箱，以GitHub为例，能够批改GitHub的默认邮箱。 GitHub -> Settings -> Emails -> Primary email address 导入我的项目输出你的我的项目地址抉择你的账户在线装置Vercel受权Vercel，抉择受权我的项目 GitHub -> Settings -> Applications -> Vercel -> Configure导入我的项目，抉择我的项目框架 部署我的项目导入项后会主动构建、公布我的项目，间接拜访: https://ichochy.com/ 下次提交代码到Git仓库，Vercel不必任何操作，就能够间接主动构建和公布我的项目 自定义域名间接增加已有的域名，域名商管理系统配置域名记录，期待失效。 Vercel -> Project-> Settings -> Domains失效后会主动签发SSL证书，开启HTTPS 指定 Hugo 版本在我的项目的环境变量中增加Hugo版本 Vercel -> Project-> Settings -> Environment VariablesHUGO_VERSION 0.74.2实现后从新公布 Build Logs12:21:18.550 Cloning github.com/iChochy/iChochy.github.io (Branch: master, Commit: a169de0)12:21:19.212 Cloning completed in 662ms12:21:19.213 Analyzing source code...12:21:19.799 Installing build runtime...12:21:20.194 Build runtime installed: 394.753ms12:21:20.575 Looking up build cache...12:21:20.638 Build cache found. Downloading...12:21:20.647 Build cache downloaded [206.00 B]: 8.14ms12:21:21.022 Installing Hugo version 0.74.212:21:23.078 Installing dependencies...12:21:23.290 yarn install v1.22.412:21:23.302 info No lockfile found.12:21:23.306 [1/4] Resolving packages...12:21:23.306 [2/4] Fetching packages...12:21:23.309 [3/4] Linking dependencies...12:21:23.312 [4/4] Building fresh packages...12:21:23.315 success Saved lockfile.12:21:23.316 Done in 0.03s.12:21:23.515 Building sites … 12:21:23.515 | EN 12:21:23.515 -------------------+------12:21:23.515 Pages | 109 12:21:23.515 Paginator pages | 4 12:21:23.515 Non-page files | 0 12:21:23.515 Static files | 13 12:21:23.515 Processed images | 0 12:21:23.515 Aliases | 1 12:21:23.515 Sitemaps | 1 12:21:23.515 Cleaned | 0 12:21:23.515 Total in 162 ms12:21:23.776 Uploading build outputs...12:21:31.360 Build completed. Populating build cache...12:21:31.457 Uploading build cache [220.00 B]...12:21:31.614 Build cache uploaded: 156.776ms12:21:31.620 Done with ”config.toml“相干文章HUGO 目录详解，创立本人的网站零碎2020/08/10收费创立属于本人的博客，Hugo+Github Pages 2020/08/02集体站长的加速器 - 百度云减速 2020/06/22通过Cloudflare开启全站https 2019/10/08jekyll-admin的搭建和应用 2019/09/25源文：https://ichochy.com/posts/20200822.html ...

集体博客是展现本人经验或成就的现实场合。把个人简历、一些十分酷的小我的项目或生存体验写到博客里是一种十分棒的感觉。 一些喜爱写博客的小伙伴必定想过，要是有一个属于本人的博客网站就好了。 所以，本篇文章的目标就是和大家分享一种本人入手搭建博客的计划：Hugo + Github pages 介绍在入手搭建之前，有必要给小伙伴们介绍 Hugo 和 Github pages 别离是什么。 Github 想必大家不生疏了，它是寰球最大的同性网站。托管集体、团队或组织的我的项目。 Hugo 是一个用 Golang 写的动态网站生成器，非常简单、高效，而且易于扩大。你能够用它更换不同的主题，生成动态博客网站，配合 Github pages，寰球各地的网友都能够拜访到你的网站。 以下的站点用 Hugo 和 Github pages 搭建，上面介绍部署过程。 step1. 申请一个 Github 仓库1. 注册 Github如果已有账号，间接登录 2. 理解 Github page 创立过程进入 Github Pages 官网，理解创立过程。 3. 创立仓库点击 Github 右上角头像旁边的 "+"，点击 New repository 进入创立仓库页面输出仓库名称，如下图: 留神：仓库名的格局为 <username>.github.io，username 是你 Github 的账号名。 点击页面最下方的 Create reporitory 即创立胜利拜访 https://<username>.github.io 看看是否可能拜访胜利step2. 装置 HugoHugo 有多种装置形式，具体怎么装置要看你的电脑系统。 Hugo 官网装置指南 我的电脑是 win10 零碎，能够下载 exe 文件间接装置即可，也能够下载源码编译装置。 ...

Archetypesarchetypes 这个文件夹寄存的是内容模板，如果我的项目里没有任何文件，Hugo 会去主题文件里找。 hugo new posts/my-first-post.md以上命令会创立文件 content/posts/my-first-post.md，会顺次寻找： archetypes/posts.mdarchetypes/default.mdthemes/my-theme/archetypes/posts.mdthemes/my-theme/archetypes/default.mdmy-theme 是应用的主题。 模板示例： ---title: "{{ replace .Name "-" " " | title }}"date: {{ .Date }}draft: true---Content所有文章的内容都寄存在 content 目录下。 Hugo ModulesHugo 的模块能够是一个主我的项目，也能够是蕴含 static, content, layouts, data, assets, i18n 和 archetypes 一个子项目

简介hugo是一个用Go语言编写的动态网页生成器，只须要一个命令 hugo 就能够在几秒钟内生成一个动态的博客页面，被称为世界上最快的网站构建框架，使hugo称为最受欢迎且最热门的动态网站生成器之一。 我之前应用的是wordpress作为博客的载体，然而wordpress太轻便，对markdown格局的反对不是很好，且关上速度极慢，所以就应用hugo进行博客的撰写，生成动态博客后就能够部署在云服务器上或者GitHub上，这样在国内搜到的云服务器上的博客http://www.mockingj.cn，在国外就是github上的pageshttps://caecarxu.github.io/,这样国内外都有一个比拟好的访问速度。 1、装置hugo我应用的零碎是windows10，在hugo的官网文档中，应用Scoop作为包管理器，用一个命令行就实现下载 scoop install hugo或者是装置hugo的extend版本 scoop install hugo-extended装置胜利后验证一下，在命令行中输出 hugo version若输入 hugo v0.86.1-F6821B88 windows/amd64 BuildDate=2021-07-30T10:13:35Z VendorInfo=gohugoio则为胜利装置 当然不想用windows的包管理器，能够应用git进行下载 git clone https://github.com/gohugoio/hugo.git #将hugo下载至命令行所在文件夹而后在右击windows中的此电脑，在抉择框中抉择属性->高级零碎设置->环境变量->零碎变量->Path->编辑，将刚刚的hugo文件夹退出Path中 重启电脑，执行hugo version命令，验证装置。 2、应用hugo在命令行中执行hugo help能够查看hugo的根本应用办法： hugo is the main command, used to build your Hugo site.Hugo is a Fast and Flexible Static Site Generatorbuilt with love by spf13 and friends in Go.Complete documentation is available at http://gohugo.io/.Usage: hugo [flags] hugo [command]Available Commands: config Print the site configuration convert Convert your content to different formats deploy Deploy your site to a Cloud provider. env Print Hugo version and environment info gen A collection of several useful generators. help Help about any command import Import your site from others. list Listing out various types of content mod Various Hugo Modules helpers. new Create new content for your site server A high performance webserver version Print the version number of HugoFlags: -b, --baseURL string hostname (and path) to the root, e.g. http://spf13.com/ -D, --buildDrafts include content marked as draft -E, --buildExpired include expired content -F, --buildFuture include content with publishdate in the future --cacheDir string filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/ --cleanDestinationDir remove files from destination not found in static directories --config string config file (default is path/config.yaml|json|toml) --configDir string config dir (default "config") -c, --contentDir string filesystem path to content directory --debug debug output -d, --destination string filesystem path to write files to --disableKinds strings disable different kind of pages (home, RSS etc.) --enableGitInfo add Git revision, date and author info to the pages -e, --environment string build environment --forceSyncStatic copy all files when static is changed. --gc enable to run some cleanup tasks (remove unused cache files) after the build -h, --help help for hugo --i18n-warnings print missing translations --ignoreCache ignores the cache directory --ignoreVendor ignores any _vendor directory --ignoreVendorPaths string ignores any _vendor for module paths matching the given Glob pattern -l, --layoutDir string filesystem path to layout directory --log enable Logging --logFile string log File path (if set, logging enabled automatically) --minify minify any supported output format (HTML, XML etc.) --noChmod don't sync permission mode of files --noTimes don't sync modification time of files --path-warnings print warnings on duplicate target paths etc. --poll string set this to a poll interval, e.g --poll 700ms, to use a poll based approach to watch for file system changes --print-mem print memory usage to screen at intervals --quiet build in quiet mode --renderToMemory render to memory (only useful for benchmark testing) -s, --source string filesystem path to read files relative from --templateMetrics display metrics about template executions --templateMetricsHints calculate some improvement hints when combined with --templateMetrics -t, --theme strings themes to use (located in /themes/THEMENAME/) --themesDir string filesystem path to themes directory --trace file write trace to file (not useful in general) -v, --verbose verbose output --verboseLog verbose logging -w, --watch watch filesystem for changes and recreate as neededAdditional help topics: hugo check Contains some verification checksUse "hugo [command] --help" for more information about a command.这里咱们只须要应用几个命令就能够了: ...

Vercel 能够依靠 Git仓库 ，在线主动构建和公布Web动态我的项目，反对自定义域名，能够主动签发SSL证书，开启HTTPS，还有一个特点，领有寰球CDN，国内速度不错。 反对多套框架和模版，如：Hugo、Jekyll、Hexo、Next、Vue… 注册账号通过Git仓库账号关联注册，如果注册中呈现谬误，查看下账号是不是QQ邮箱。 Vercel不反对QQ邮箱，以GitHub为例，能够批改GitHub的默认邮箱。 GitHub -> Settings -> Emails -> Primary email address 导入我的项目输出你的我的项目地址 抉择你的账户 在线装置Vercel 受权Vercel，抉择受权我的项目 GitHub -> Settings -> Applications -> Vercel -> Configure 导入我的项目，抉择我的项目框架 部署我的项目导入项后会主动构建、公布我的项目，间接拜访: https://ichochy.com/ 下次提交代码到Git仓库，Vercel不必任何操作，就能够间接主动构建和公布我的项目 自定义域名间接增加已有的域名，域名商管理系统配置域名记录，期待失效。 Vercel -> Project-> Settings -> Domains 失效后会主动签发SSL证书，开启HTTPS 指定 Hugo 版本在我的项目的环境变量中增加Hugo版本 Vercel -> Project-> Settings -> Environment VariablesHUGO_VERSION 0.74.2 实现后从新公布 Build Logs12:21:18.550 Cloning github.com/iChochy/iChochy.github.io (Branch: master, Commit: a169de0)12:21:19.212 Cloning completed in 662ms12:21:19.213 Analyzing source code...12:21:19.799 Installing build runtime...12:21:20.194 Build runtime installed: 394.753ms12:21:20.575 Looking up build cache...12:21:20.638 Build cache found. Downloading...12:21:20.647 Build cache downloaded [206.00 B]: 8.14ms12:21:21.022 Installing Hugo version 0.74.212:21:23.078 Installing dependencies...12:21:23.290 yarn install v1.22.412:21:23.302 info No lockfile found.12:21:23.306 [1/4] Resolving packages...12:21:23.306 [2/4] Fetching packages...12:21:23.309 [3/4] Linking dependencies...12:21:23.312 [4/4] Building fresh packages...12:21:23.315 success Saved lockfile.12:21:23.316 Done in 0.03s.12:21:23.515 Building sites … 12:21:23.515 | EN 12:21:23.515 -------------------+------12:21:23.515 Pages | 109 12:21:23.515 Paginator pages | 4 12:21:23.515 Non-page files | 0 12:21:23.515 Static files | 13 12:21:23.515 Processed images | 0 12:21:23.515 Aliases | 1 12:21:23.515 Sitemaps | 1 12:21:23.515 Cleaned | 0 12:21:23.515 Total in 162 ms12:21:23.776 Uploading build outputs...12:21:31.360 Build completed. Populating build cache...12:21:31.457 Uploading build cache [220.00 B]...12:21:31.614 Build cache uploaded: 156.776ms12:21:31.620 Done with "config.toml"相干文章HUGO 目录详解，创立本人的网站零碎 2020/08/10收费创立属于本人的博客，Hugo+Github Pages 2020/08/02集体站长的加速器 - 百度云减速 2020/06/22通过Cloudflare开启全站https 2019/10/08jekyll-admin的搭建和应用 2019/09/25源文：https://ichochy.com/posts/20200822/ ...

???? 前言咱们晓得，动态博客因为不带有动静性能，所以针对评论这种动静需要比拟公众的做法就是应用第三方评论零碎。第三方评论的实质其实就是应用 JS 去调取第三方服务接口获取评论后动静渲染到页面中。尽管它很好的解决了这个问题，然而因为须要申请接口，在体验上远比动静博客的直出成果要差很多。所以当我把博客从动静博客 Typecho 迁徙到动态博客 Hugo 上来时，就始终在思考这个问题。直到我看到了 Hugo 的 getJSON 办法，发现原来动态博客也是可能像动静博客一样直出评论的。 大部分的动态博客的原理是解析存储内容的文件夹，应用一些模板语言遍历数据生成一堆 HTML 文件。而 Hugo 除了解析 Markdown 内容之外，还反对额定的数据获取办法 getJSON。因为有了 getJSON 办法的呈现，咱们能够实现在博客编译构建过程中动静的去获取评论接口数据，将其渲染到页面中，实现评论数据的直出成果。对于 getJSON 的更多介绍，能够查看 Hugo 文档数据模板一节。 ???? 计划高性能计划基本思路是在须要评论数据的中央通过 getJSON 办法调用接口获取评论数据并进行模板渲染。当评论更新的时候，咱们须要触发从新构建。实现这个计划依赖三个要害因素： 构建过程反对调取接口获取数据评论服务提供 HTTP 接口返回数据博客部署服务反对钩子触发从新构建我的博客应用的是 Hugo 动态博客零碎，如上文所说通过 getJSON 即可解决第一个问题。而我的评论服务应用的是自研的 Waline 评论零碎，它提供了评论数、评论列表、最近评论等根底接口满足咱们的数据获取需要。并且 Waline 提供了丰盛的钩子性能，反对在评论公布的时候触发自第一办法。我的博客部署在 Vercel 上，它提供了 Deploy Hooks 性能，通过 URL 即可触发从新构建。也就是说我只有在 Waline 评论公布的钩子中调用 Vercel 的钩子 URL 触发从新构建即可解决第三个问题。 ???? 实现我的博客上有三处中央和评论无关，别离是首页侧边栏的最近评论，文章题目下方的评论数，以及文章详情页底部的评论列表展现。 ???? 最近评论Waline 最近评论接口：文档 {{ $walineURL := .Site.Params.comment.waline.serverURL }}<h2 class="widget-title ">最近回复</h2><ul class="widget-list recentcomments"> {{ $resp := getJSON $walineURL "/comment?type=recent" }} {{ range $resp }} <li class="recentcomments"> <a href="{{.Site.BaseURL}}{{ .url }}">{{ .nick }}</a>：{{ .comment | safeHTML | truncate 22 }} </li> {{ end }}</ul>???? 文章评论数Waline 获取文章对应的评论数接口：文档 ...

"基友遍四海，友链不可少"本文介绍如何在 hugo 中增加友情链接 一、前言应用 Hugo 搭建博客的你是否还在为没有友情链接而懊恼，浏览本文将为你制作属于本人的友情链接提供解决方案。 二、友情链接2.1 成果先看咋们的效果图 实在成果 首页：点击后：手机端： 2.2 制作过程2.2.1 减少菜单栏[languages] [languages.en] ...... [languages.en.menu] ...... [[languages.en.menu.main]] identifier = "friend" pre = "" post = "" name = "Friend" url = "/friend/" title = "" weight = 5 ...... [languages.en.params] ......首先在 menu 减少一个菜单项为 friend 示意友情链接，下面是多语言的版本，不是多语言也是一样的逻辑。 2.2.2 制作 shortcodes2.2.2.1 创立 html在你博客的门路 /xxx/blog/layouts/shortcodes/ 下创立 friend.html 文件。 {{ if .IsNamedParams }} {{- $src := .Get "logo" -}} {{- $small := .Get "logo_small" | default $src -}} {{- $large := .Get "logo_large" | default $src -}} <div class="flink" id="article-container"> <div class="friend-list-div" > <div class="friend-div"> <a target="_blank" href={{ .Get "url" | safeURL }} title={{ .Get "name" }} > <img class="lazyload" src="/svg/loading.min.svg" data-src={{ $src | safeURL }} alt={{ .Get "name" }} data-sizes="auto" data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" /> <span class="friend-name">{{ .Get "name" }}</span> <span class="friend-info">{{ .Get "word" }}</span> </a> </div> </div> </div>{{ end }}.Get 是 hugo shortcodes 的用法，能够获取到属性2.2.2.2 创立 scss款式基本上就是拿来用了，没改过assets/css/_partial/_single/ 上面新建 _friend.scss 文件#article-container { word-wrap: break-word; overflow-wrap: break-word}#article-container a { color: #49b1f5}#article-container a:hover { text-decoration: underline}#article-container img { margin: 0 auto .8rem}.flink#article-container .friend-list-div > .friend-div a .friend-info,.flink#article-container .friend-list-div > .friend-div a .friend-name { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap}.flink#article-container .friend-list-div { overflow: auto; padding: 10px 10px 0; text-align: center;}.flink#article-container .friend-list-div > .friend-div { position: relative; float: left; overflow: hidden; margin: 15px 7px; width: calc(100% / 3 - 15px); height: 90px; border-radius: 8px; line-height: 17px; -webkit-transform: translateZ(0)}@media screen and (max-width: 1100px) { .flink#article-container .friend-list-div > .friend-div { width: calc(50% - 15px) !important }@media screen and (max-width: 600px) { .flink#article-container .friend-list-div > .friend-div { width: calc(100% - 15px) !important }}}.flink#article-container .friend-list-div > .friend-div:hover { background: rgba(87, 142, 224, 0.15);}.flink#article-container .friend-list-div > .friend-div:hover img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg)}.flink#article-container .friend-list-div > .friend-div:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--text-bg-hover); content: ''; -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; -ms-transition: -ms-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0)}.flink#article-container .friend-list-div > .friend-div:hover:before,.flink#article-container .friend-list-div > .friend-div:focus:before,.flink#article-container .friend-list-div > .friend-div:active:before { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1)}.flink#article-container .friend-list-div > .friend-div a { color: var(--font-color); text-decoration: none}.flink#article-container .friend-list-div > .friend-div a img{ float: left; margin: 15px 10px; width: 60px; height: 60px; border-radius: 35px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s}.flink#article-container .friend-list-div > .friend-div a .friend-name { display: block; padding: 16px 10px 0 0; height: 40px; font-weight: 700; font-size: 20px}.flink#article-container .friend-list-div > .friend-div a .friend-info { display: block; padding: 1px 10px 1px 0; height: 50px; font-size: 13px}assets/css/_page/ 上面新建 _single.scss 文件把主题 /themes/loveIt/assets/css/_page/_single.scss 的文件拷贝到博客我的项目指定目录，关键在于增加一行 @import "../_partial/_single/_friend";@import "../_partial/_single/toc";@import "../_partial/_single/_friend";.single { .single-title { margin: 1rem 0 .5rem; font-size: 1.6rem; font-weight: bold; line-height: 140%; } .single-subtitle { margin: .4rem 0; font-size: 1.2rem; font-weight: normal; font-style: italic; line-height: 100%; } .post-meta { font-size: .875rem; color: $global-font-secondary-color; span { display: inline-block; } [theme=dark] & { color: $global-font-secondary-color-dark; } @include link(false, true); .author { font-size: 1.05rem; } } .featured-image { margin: .5rem 0 1rem 0; img { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: hidden; } img.lazyloaded { width: 100%; } } .content { > h2 { font-size: 1.5rem; & code { font-size: 1.25rem; } } > h3 { font-size: 1.375rem; & code { font-size: 1.125rem; } } > h4 { font-size: 1.25rem; & code { font-size: 1rem; } } > h5 { font-size: 1.125rem; } > h6 { font-size: 1rem; } h2, h3, h4, h5, h6 { font-weight: bold; margin: 1.2rem 0; [theme=dark] & { font-weight: bolder; } } > h2, > h3, > h4, > h5, > h6 { > .header-mark::before { content: "|"; margin-right: .3125rem; color: $single-link-color; [theme=dark] & { color: $single-link-color-dark; } } } > h2 > .header-mark::before { content: "#"; } p { margin: .5rem 0; } b, strong { font-weight: bold; [theme=dark] & { color: #ddd; } } @include link(false, false); a { @include overflow-wrap(break-word); [theme=dark] & b, [theme=dark] & strong { color: $single-link-color-dark; } } [theme=dark] a:hover b, [theme=dark] a:hover strong { color: $single-link-hover-color-dark; } ul, ol { margin: .5rem 0; padding-left: 2.5rem; } ul { list-style-type: disc; } ruby { background: $code-background-color; rt { color: $global-font-secondary-color; } [theme=dark] & { background: $code-background-color-dark; rt { color: $global-font-secondary-color-dark; } } } .table-wrapper { overflow-x: auto; &::-webkit-scrollbar { background-color: $table-background-color; [theme=dark] & { background-color: $table-background-color-dark; } } > table { width: 100%; max-width: 100%; margin: .625rem 0; border-spacing: 0; background: $table-background-color; border-collapse: collapse; [theme=dark] & { background: $table-background-color-dark; } thead { background: $table-thead-color; [theme=dark] & { background-color: $table-thead-color-dark; } } th, td { padding: .3rem 1rem; border: 1px solid darken($table-thead-color, 2%); [theme=dark] & { border-color: darken($table-thead-color-dark, 2%); } } } } img { max-width: 100%; min-height: 1em; } figure { margin: .5rem; text-align: center; .image-caption:not(:empty) { min-width: 20%; max-width: 80%; display: inline-block; padding: .5rem; margin: 0 auto; font-size: .875rem; color: #969696; } img { display: block; height: auto; margin: 0 auto; overflow: hidden; } } .lazyloading { @include object-fit(none); } blockquote { display: block; border-left: .5rem solid $blockquote-color; background-color: rgba($blockquote-color, .2); padding: .25rem .75rem; margin: 1rem 0; [theme=dark] & { border-left-color: $blockquote-color-dark; background-color: rgba($blockquote-color-dark, .2); } } .footnotes { color: $global-font-secondary-color; [theme=dark] & { color: $global-font-secondary-color-dark; } p { margin: .25rem 0; } } @import "../_partial/_single/code"; @import "../_partial/_single/instagram"; @import "../_partial/_single/admonition"; @import "../_partial/_single/echarts"; @import "../_partial/_single/mapbox"; @import "../_partial/_single/music"; @import "../_partial/_single/bilibili"; hr { margin: 1rem 0; position: relative; border-top: 1px dashed $global-border-color; border-bottom: none; [theme=dark] & { border-top: 1px dashed $global-border-color-dark; } } kbd { display: inline-block; padding: .25rem; background-color: $global-background-color; border: 1px solid $global-border-color; border-bottom-color: $global-border-color; @include border-radius(3px); @include box-shadow(inset 0 -1px 0 $global-border-color); font-size: .8rem; font-family: $code-font-family; color: $code-color; [theme=dark] & { background-color: $global-background-color-dark; border: 1px solid $global-border-color-dark; border-bottom-color: $global-border-color-dark; @include box-shadow(inset 0 -1px 0 $global-border-color-dark); color: $code-color-dark; } } .typeit { .code { padding: .375rem; font-size: .875rem; font-family: $code-font-family; font-weight: bold; word-break: break-all; } } .version { height: 1.25em; vertical-align: text-bottom; } } @import "../_partial/_single/footer"; @import "../_partial/_single/comment";}.lg-toolbar .lg-icon::after { color: #999;}2.3 增加内容在 content/friend 下新建 index.语言.md ...

之前写了篇文章《博客迁徙至 Hugo》，提了下应用 Typecho 多年后越发感触到运维的老本之高后，将博客迁徙到了动态博客程序 Hugo 下。应用 Vercel + Github 能够收费搭建高性能博客，绑定域名还能主动帮忙创立 SSL 证书。当然偷懒的话也能够间接应用默认调配的二级域名。 搭建 点击下面的按钮疾速到达创立页面，未登录的会须要登录，这块间接应用 Github 登录即可。登录后第一步会让你抉择 Vercel 账号，这里间接抉择 Personal Account 即可。之后会让你输出仓库名称，Vercel 会主动帮你创立并初始化该仓库。如果你的仓库不想让其它人看的话，这里能够勾选 Private Git Repository 创立公有仓库。 下一步这块会让你输出 Vercel 中我的项目的名称和一些配置。这里须要留神一下，官网提供的默认 Hugo 编译命令会把草稿文章也生成进去。须要在 BUILD COMMAND 那关上 OVERRIDE 按钮后输出 hugo --gc 进行笼罩。 稍等片刻之后，你就能够看到飘着满屏的彩带庆贺你创立博客胜利叻！点击 Visit 按钮你就能够看到你的博客的样子了。 因为是动态博客，你所有的文章都会存储在你方才新建的仓库中。你能够抉择将仓库下来批改后提交，也能够利用 Github 的在线编辑性能在线批改提交。提交之后 Vercel 会主动触发更新，从新构建并更新你的博客。 配置默认每次提交 Vercel 构建实现之后都会把构建后的地址评论在你的 Github 提交下。你能够通过设置敞开该性能。另外默认 Vercel 指定的 Hugo 版本比拟老了，在 Markdown 编译过程中会产生一些异样的行为。咱们能够通过配置指定最新的 Hugo 版本进行编译。在我的项目根目录下新建 vercel.json 文件，并退出以下内容。 ...

简介因为之前应用的 hexo 搭建的博客，然而很多资源都是应用的国外 cdn，动态资源有点多，在国内应用有点慢，而且我的博客是小水管，所以物色良久才发现 hugo 这个动态博客生成工具，试用之后发现比拟满足我目前的要求，而且主题也不少，博客迁徙的工作量也不大，最重要一点是 go 实现的，配上 go 实现的 caddy，所以综合思考，我的技术选型如下： traefik （完满与 docker 联合）hugocaddy文章次要蕴含上面几局部： 软件介绍环境搭建博客初始化博客部署软件介绍Hugo是一个弱小的动态博客生成器，由spf13应用Golang开发。在性能和生成文章的速度上都不错。 Caddy同样也是一个由Golang开发的HTTP server，其最大的亮点就是内建了HTTPS和HTTP2的反对，同时主动可能向Let’s Encrypt申请证书。同时，反对Middleware的性能，应用Golang撰写的Middleware可能反对各种各样的性能，同时任何人都能够撰写本人的Middleware，个性化这个HTTP Server。 环境搭建golang 环境搭建hugo 装置golang环境搭建到 Go语言中文网 下载 golang 的安装包，而后依照 装置阐明 进行装置，根本都是下一步即可。 装置实现后，校验装置是否胜利： $ go versiongo version go1.14.4 windows/amd64我这里装置的是 golang 的 1.14.4 版本。 hugo 装置在命令行终端装置 github.com/spf13/hugo 工具： $ go get -v github.com/spf13/hugo校验装置是否胜利： $ hugo versionHugo Static Site Generator v0.73.0 windows/amd64 BuildDate: unknown装置胜利，版本是 v0.73.0 博客初始化hugo 初始化博客我的项目应用 hugo 主题 pure从 hexo 迁徙到 hugohugo 初始化我的项目应用Hugo疾速生成站点，比方心愿生成到 /path/to/site 门路： ...

Hugo 领有超快的速度，弱小的内容治理和弱小的模板语言，使其非常适合各种动态网站。能够轻松装置在macOS，Linux，Windows等平台上，在开发过程中应用LiveReload可即时渲染更改 一、装置 HugoMac 上装置 HUGO，很简略，通过 brew 能够疾速装置 brew install hugo查看装置版本信息 hugo version二、应用 Hugo1、创立网站hugo new site iChochy 创立 其中 iChochy 为你的博客目录目录构造 iChochy├── archetypes│   └── default.md├── config.toml├── content├── data├── layouts├── static└── themes2、增加主题a、下载主题以 hyde主题为例 https://github.com/spf13/hyde 间接下载主题，放到themes目录中，或通过 git 形式增加主题 git submodule add https://github.com/spf13/hyde.git themes/hydeb、批改配置echo 'theme = "hyde"' >> config.tomlconfig.toml 文件内容 baseURL = "https://ichochy.com/"languageCode = "en-us"title = "My New Hugo Site"theme = "hyde" 目录构造 iChochy├── archetypes│   └── default.md├── config.toml├── content├── data├── layouts├── static└── themes └── hyde ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── archetypes │   └── default.md ├── go.mod ├── images │   ├── screenshot.png │   └── tn.png ├── layouts │   ├── 404.html │   ├── _default │   │   ├── baseof.html │   │   ├── list.html │   │   └── single.html │   ├── index.html │   └── partials │   ├── head.html │   ├── head_fonts.html │   ├── hook_head_end.html │   └── sidebar.html ├── static │   ├── apple-touch-icon-144-precomposed.png │   ├── css │   │   ├── hyde.css │   │   ├── poole.css │   │   ├── print.css │   │   └── syntax.css │   └── favicon.png └── theme.toml3、编写内容新建文章hugo new posts/HelloWorld.md 新建 注：以 archetypes/default.md为模版创立 ...