搭建自己的个人博客_Windows_Hugo
一、前言
Hugo
是一款基于 Go
语言而实现的静态网站生成器,具有简单易用、高效易扩展、快速部署的特点。
二、安装Hugo
预构建的二进制文件可用于各种操作系统和体系结构。访问最新版本页面,然后向下滚动到Assets(资产)部分。
-
下载所需版本、操作系统和体系结构的存档。建议下扩展版
-
提取存档,解压之后会有三个文件
-
新建bin目录,将可执行文件移动到
E:\Hugo\bin
目录 -
将此目录
E:\Hugo\bin
添加到 PATH 环境变量高级系统设置—>环境变量—>系统变量—>Path
-
验证您是否对文件具有执行权限,打开命令提示符,执行
hugo version
出现版本号,hugo配置完成
三、安装Git
Git for Windows 专注于提供一组轻量级的本机工具,将 Git SCM 的完整功能集带到 Windows,同时为有经验的 Git 用户和新手提供适当的用户界面。
1、Git BASH
Git for Windows 提供了一个 BASH 仿真,用于从命令行运行 Git。*NIX用户应该感到宾至如归,因为BASH仿真的行为就像LINUX和UNIX环境中的“git”命令一样。
2、Git GUI
由于Windows用户通常期望图形用户界面,Git for Windows还提供了Git GUI,这是Git MASH的强大替代品,提供了几乎所有Git命令行函数的图形版本,以及全面的视觉差异工具。
3、壳体集成
只需右键单击Windows资源管理器中的文件夹即可访问BASH或GUI。
4、详细安装教程
改:2.2.6 决定初始化新项目(仓库)的主干名字——选第二种为main
四、用Hugo来生成博客
1、假设要创建博客存放在E:\Hugo\Sites\
目录中,进入Git Base命令行,切换到该目录下执行hugo new site myblog
创建myblog博客
生成博客命令:
|
|
创建成功后会有如下目录组织
2、目录组织:Hugo博客目录组织介绍
五、下载并设置主题
Hugo有很多的主题:Hugo主题下载地址
这里以m10c主题为例,主题里有下载及配置的教程
[path]=E:/Hugo/Sites/myblog
六、在本地启动个人博客
1、启动博客命令:
|
|
2、浏览器访问地址:http://localhost:1313/
最基本的博客启动成功!
七、新建一篇文章
新建博客命令:
|
|
八、将个人博客部署到远端服务器
1、注册或登录github官网
2、创建存储仓库(输入Repository name,其他默认)
3、生成public文件夹
——myblog
路径下
命令(需对应自己的存储仓库名):
|
|
4、将public文件夹传到远程仓库
——public
路径下执行
(1)初始化仓库
|
|
(2)添加文件到暂存区(’.‘是全部添加)
|
|
(3)将暂存区内容添加到仓库中(后跟提交信息)
|
|
(4)本地仓库与远程仓库进行关联(需对应自己的github账号和储存仓库名)
|
|
(5) 上传远程代码并合并
|
|
九、一键部署命令
以后添加文章部署到远程仓库,提交代码的时候一般有以下步骤:
|
|
以上这样太麻烦,我们可以将git blog
这个命令作为以后日常一键部署的命令。输入以下命令即可完成配置:
|
|
使用alias
即可为一系列命令配置一个别名
当你写好文章之后,就可以在任意目录执行这个命令:
|
|
这样就达到了我们的目的:通过一个命令就可以更新博客文件,并自动推送到github 上。
十、补充
1、git add .
出现
报错信息:
fatal: unable to access 'https://github.com/Winner9696/Winner9696.github.io.git/': Failed to connect to github.com port 443 after 21058 ms: Couldn't connect to server
报错原因:
- 换行符的问题,Windows下换行符和Unix下的换行符不一样,git会自动转换,但是这样有问题,所以解决方法如下:
解决方案:
- 使用命令,禁止自动转换:
|
|
2、Hugo静态网站图片插入问题
Hugo静态资源载入逻辑
(1)hugo 的静态文件放置在 /static 文件夹下,文章 markdown 文件放在 /content/post
文件夹下
(2)hugo 生成的public
文件夹(即整个网页静态文件),会将static
里的内容放到网站根目录
(3)基于以上两点,图片的相对路径要写成这种格式:![imagename](/image/imagename.png)
(4)由于 markdown 和生成的 html 的图片路径是一致的,因此 markdown 里也要这么写。但是如果直接把图片放到/static/image
里,在本地就无法正常显示这个文件夹
解决方案
基于以上4点原因,解决方案有以下几种:
-
在
/post/image
里放图片,然后复制到/static/image
评价:麻烦 -
在(1)的基础上,写一个批处理,完成复制的任务;(因为之前写过的批处理:生成 public.cmd,只要在前面加上复制的命令就行) 评价:可行,但是不完美,可能出现文件权限问题
-
不管,就当瞎了,本地不看,直接看server实时渲染 评价:可行,但是太惨了
-
做一个 link,链接两个文件夹 评价:一劳永逸,可行。建立链接
cmd(管理员)
命令:
|
|
为了方便,我们希望在typora里粘贴的图片直接到image路径下,为此要做以下两步:
-
在markdown的文件头写入图片根目录,根目录为当前文件夹(
./
) :typora-root-url: ./
(也可以在格式—>图像—>设置图片根目录,选择\content\post
typora会自动会加入这行配置) -
文件—>偏好设置—>图像,插入图片时复制到指定路径
./image
,应用规则优先使用相对路径
3、git commit或push报错
报错信息:
fatal: unable to access 'https://github.com/Winner9696/Winner9696.github.io.git/': Failed to connect to github.com port 443 after 21058 ms: Couldn't connect to server
报错原因:
-
因为git在拉取或者提交项目时,中间会有git的http和https代理,但是我们本地环境本身就有SSL协议了,所以取消git的https代理即可,不行再取消http的代理。
-
原因还有一个,当前代理网速过慢,所以偶尔会成功,偶尔失败。
解决方案:
-
在项目文件夹的命令行窗口执行下面代码,然后再
git commit
或git push
取消git本身的https代理,使用自己本机的代理,如果没有的话,其实默认还是用git的1 2 3 4
//取消http代理 git config --global --unset http.proxy //取消https代理 git config --global --unset https.proxy
4、Git命令大全
![Winner Alipay](/images/alipay.jpg)
![Winner WeChat Pay](/images/wechatpay.jpg)