Featured image of post windows系统搭建hugo+github博客

windows系统搭建hugo+github博客

在windows系统上利用hugo和github搭建个人博客。

在windows系统上利用hugo和github搭建个人博客。。。

hugo博客

这里跟着官网教程进行配置,刚开始折腾hugo博客的话,最重要的是折腾成功,官网教程简单实用。hugo也有中文的官方文档,可以自主选择使用。

安装hugo

到官方的GitHub仓库下载适合你的操作系统的版本。解压后可以进行重命名,我解压后重命名为hugo。

把 hugo (或者是 Windows 的 hugo.exe) 放到你的 环境变量 PATH 所在的目录,因为下一步我们将会用到它。

创建站点目录

在磁盘中新建一个文件夹作为自己的站点目录,如:myhugo,在文件夹下打开cmd执行如下命令:hugo new site myhugo,然后名字为myhugo的站点目录就创建好了。 生成的站点目录如下: 2

安装主题

cd ~/myhugo
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

切换主题

cd ~/myhugo
mv config.toml config.toml_bak# 把原来的配置Even 的文件备份一下
cp themes/hugo-theme-stack/exampleSite/config.yaml .

注意

yaml文件作为配置文件,每个:后要加空格。

配置文件

baseURL: https://仓库名.github.io

languageCode: zh-cn
theme: hugo-theme-stack
paginate: 5
title: 

languages:
en:
languageName: English
title: "WCQ's Blog"
weight: 1
zh-cn:
languageName: 中文
title: 一不留神的博客
weight: 2
ar:
languageName: عربي
languagedirection: rtl
title: موقع تجريبي
weight: 3

# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack

# GA Tracking ID
googleAnalytics: UA-232146632-1

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

permalinks:
post: /p/:slug/
page: /:slug/

params:
mainSections:
- post
featuredImageField: image
rssFullContent: true
favicon:

footer:
since: 2022
customText:

dateFormat:
published: Jan 02, 2006
lastUpdated: Jan 02, 2006 15:04 MST

sidebar:
emoji: 🍥
subtitle: Guangdong University of Technology
avatar:
enabled: true
local: true
src: img/avatar.png

article:
math: true
toc: true
readingTime: true
license:
enabled: true
default: Licensed under CC BY-NC-SA 4.0

comments:
enabled: true
provider: utterances

disqusjs:
shortname:
apiUrl:
apiKey:
admin:
adminLabel:

utterances:
repo: wcq062821/blog_data
issueTerm : pathname
label: none

remark42:
host:
site:
locale:

vssue:
platform:
owner:
repo:
clientId:
clientSecret:
autoCreateIssue: false

# Waline client configuration see: https://waline.js.org/en/reference/component.html
waline:
serverURL:
lang:
pageview:
emoji:
- https://unpkg.com/@waline/emojis@1.0.1/weibo
requiredMeta:
- name
- email
- url
locale:
admin: Admin
placeholder:

twikoo:
envId:
region:
path:
lang:

# See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
cactus:
defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
serverName: "cactus.chat"
siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)

giscus:
repo:
repoID:
category:
categoryID:
mapping:
lightTheme:
darkTheme:
reactionsEnabled: 1
emitMetadata: 0

gitalk:
owner:
admin:
repo:
clientID:
clientSecret:

cusdis:
host:
id:
widgets:
homepage:
- type: search
- type: archives
  params:
  limit: 10
- type: categories
  params:
  limit: 10
- type: tag-cloud
  params:
  limit: 10
page:
- type: toc

opengraph:
twitter:
# Your Twitter username
site:

# Available values: summary, summary_large_image
card: summary_large_image

defaultImage:
opengraph:
enabled: false
local: false
src:

colorScheme:
# Display toggle
toggle: true

# Available values: auto, light, dark
default: auto

imageProcessing:
cover:
enabled: true
content:
enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
main: []

social:
- identifier: github
  name: GitHub
  url: "https://github.com/wcq062821"
  params:
  icon: brand-github

related:
includeNewer: true
threshold: 60
toLower: false
indices:
- name: tags
  weight: 100

- name: categories
  weight: 200

markup:
goldmark:
renderer:
## Set to true if you have HTML content inside Markdown
unsafe: true
tableOfContents:
endLevel: 4
ordered: true
startLevel: 2
highlight:
noClasses: false
codeFences: true
guessSyntax: true
lineNoStart: 1
lineNos: true
lineNumbersInTable: true
tabWidth: 4

配置hugo配置文件

然后在站点目录的hugo.toml文件中最下边添加一行内容,添加的内容 theme = 'hugo-theme-stack'

创建第一篇博客

hugo new posts/我的第一篇博客.md

然后在站点目录下的content/posts/下就相应的出现了一个文件"我的第一篇博客.md"

本地预览

hugo server -D

查看最后的连接就可以看到效果啦3

部署博客到github

配置github仓库

在github创建账户,然后创建仓库,仓库命名格式为"yourname.github.io",配置仓库的主分支为master,配置仓库设置界面的pages的主分支为master。

安装好git

Windows系统Git安装教程

在本地生成ssh密钥

ssh-keygen

三次回车后密钥就生成了,生成的密钥在家目录下的.ssh目录下,将.ssh/的id_rsa.pub的内容复制到剪切板,然后 回到github网站,在帐户设置的SSH and GPG keys界面中添加剪切板的ssh公钥,然后给添加该密钥的记录随便起一 个名字用于区分可以了。

配置hugo.toml

将自己仓库的名字yourname.github.io添加到站点目录的hugo.toml配置文件中,将示例链接替换掉,然后设置博客 的语言,接着设置博客的名称,最后一行也就是第四行是咱刚开始就添加过了的,所以不用修改。

baseURL = 'yourname.github.io'
languageCode = 'zh-cn'
title = 'MyBlogs'
theme = 'ananke'

部署

先将博客的草稿模式关闭,将true修改为false,然后回到站点目录的第一级目录,然后cmd下执行命令hugo生成public目录,再进入publib目录,先添加github的仓库链接,然后执行git命令进行部署hugo的操作。

git remote add origin git@github.com:yourname/yourname.github.io.git

git add .
git commit -m "upload"
git push -u origin master

结束

操作结束自己的个人博客也就建成了。我的如下: 4

搭建多个博客

一个github搭建多个个人博客