欢迎访问建站网站,为您的企业量身打造网站,品质值得您信赖!

一键式智能建站网站平台

高端定制中小企业网站,智能网站建站制作

【自助建站平台哪个靠谱啊】cms智能建站

作者:佚名      发布时间:2021-08-13      浏览量:40611
本来想直接研究一下hugo的主题结构和相关配置的,但是在Github Pages搭建我的网站的过程中,虽然参考了别人的教程,但是还是有一些错误导致了一些问题,所以想整理用我自己的话讲出过程和方法,强调容





本来想直接研究一下hugo的主题结构和相关配置的,但是在Github Pages搭建我的网站的过程中,虽然参考了别人的教程,但是还是有一些错误导致了一些问题,所以想整理用我自己的话讲出过程和方法,强调容易出错的地方,尽量做到透彻详细,让看这篇文章的人无论有没有编程经验都能成功实践。来吧,让我们用windows+msysgit+Github+hugo来实现我们自己的个性化页面。相关软件包:百度云,提取码:。




1。准备好工作了


1.1 个 msysGit 客户端
1.2 在 Github 上注册
1.3 在 Windows 上本地配置 Git
1.4 使用雨果

2。正式建立静态网站


2.1 新文章
2.2 安装皮肤
2.3 运行雨果
2.4 简单配置

3。高级配置


3。多 1 条评论
3.2 代码高亮

4。后记







Windows下默认不预装Git。如果你是 Mac 和 Linux 用户,就没有这个烦恼。所以我们首先需要在Windows下安装一个Git软件。作者使用msysGit。截至发帖时的最新版本为 2.6。3。官网下载会自动识别系统(32位和64位)下载,然后按照向导一一安装。上面写的英文写的很清楚了,基本可以按照默认的,但是说到Ajusting your PATH environment(即设置环境变量)这一步,建议勾选第二项Run Git from Windows Command提示,以便在 Windows 命令行中全局使用 Git 相关命令。




点击Github官网进入Github首页,即可注册,输入用户名、邮箱、密码进行注册。我们选择不需要花钱的Free类型用户,点击Finish sign up完成注册。这时候在页面的最上方,Bootcamp系统会提示你下一步可以做什么,而我们首先要做的是Create Repositories。我们可以点击这个项目查看教程。当然,你也可以直接按照我下面的tips开始:



点击右侧新建仓库,系统会提示您验证邮箱。您需要使用您刚刚注册的电子邮件验证地址;
验证后可以重新新建reository,用户名必须使用:,其他不需要修改,然后点击Create repository;
下面会自动进入一个快速设置页面,告诉我们如何在仓库中添加东西,需要在Windows本地设置。




文章开头讲了windows下的Git程序,但是不配置还是不能用。下面是基本配置:




首先打开 Git Bash 做一些全局设置:






设置 SSH 密钥:






然后会要求你进入存放id_rsa的目录,然后输入密码。这个密码可以和github不同。过程中可以确认。最后会出现一个随机图形,表示SSH密钥生成成功,所以我们需要进入刚才的storage目录。打开 id_rsa。将pub中的内容复制到你的github页面->点击右上角头像旁边的三角->设置->SSH密钥->添加SSH密钥->粘贴刚才复制的内容并保存。





Hugo 是一个用 Go 语言开发的快速静态网站引擎。可以用Markdown格式的文章生成一个完整的静态网站,然后托管在自己的Github仓库中,实现静态网站,一般用于博客或者项目主页等。所以我们先来了解一下如何获取和使用:




首先从官网下载相关版本,比如我是32位windows系统,我下载hugo_0.14_windows_386。压缩;



解压后将里面的exe文件重命名为hugo。exe,并把它;



添加环境变量:我的电脑-属性-高级系统设置-环境变量,编辑PATH,添加,用英文分号与之前的内容分开。




这样我们就可以测试一下环境是否正常:
使用 Windows 命令行(Win+R,输入 cmd)并输入以下命令:






进入hugo目录,可以看到一个www文件夹,就是新创建的站点。目录结构如下:






虽然里面什么都没有,恭喜你,说明程序可以正常使用了。





首先需要先从命令行进入www文件夹,然后输入以下命令创建一个关于页面:






这将生成地板 www/content/about。md,打开文件,可以看到如下信息:






文件是md,但是+++之间的内容是TOML写的文档信息,date表示文档创建的时间,后面+08:00表示时区,draft表示草稿,如果没有生成网站时添加特殊说明 这个页面没有生成,title就是这篇文章的标题,所以不需要自己在body里写标题。
为了方便后面生成聚合页面,我们继续在www/content/post/目录下生成第一篇文章:






先打开。可以在md文件中看到以下内容,后面是上面的关于。md也差不多,我们在+++之后编辑了一点内容保存:







Hugo有很多皮肤(Github),你也可以看这里(中文),可以找到你喜欢的皮肤地址,然后在www文件夹下创建一个themes文件夹,在命令行输入文件夹,使用git 获取皮肤(我使用 hyde,这里是一个简单的皮肤主题):







在站点根目录的www文件夹下运行hugo调试命令:






theme表示使用的主题名称(themes文件夹下的主题文件夹名称),buildDrafts表示编译草稿部分(即draft=true文件),watch参数可以在文件修改时实时自动刷新页面。生成后我们就可以在浏览器中根据命令行提示输入http://127.0。0.1:1313 查看页面,如果正常,显示如下:






至此,一个简单的静态站点就已经生成了,但是还有很多地方需要修改以适应大家的需求。在www站点的根目录下可以看到一个配置文件。该文件是用 TOML 语法编写的。基本内容如下:






可以修改成这样:






重新运行根目录看看效果:






由于之前已经设置了默认主题,我们新建一篇文章看看区别:






可以看到Categories、Description、Tags和menu的格式选项比较多。顾名思义,我们可以对文章进行分类,添加简单的描述,添加标签。Menu=“main” 表示会在左侧home下显示并连接标题。你可以把关于。把这句话加到md文件里,然后在里面写一些个人简介,这样别人就可以直接点击左边的链接查看你的简介。在介绍了一些有用的配置之后,让我们学习2个高级技巧。




hyde主题默认使用disqus插件,是一个用javascript编写的国外评论插件,可以用来嵌入页面,实现静态网页的评论功能。可以直接在文件中添加。当然前提是你去disqus网站注册一个。个人账户。中国人的模仿能力是无限的,所以有替代的国内版本。可以注册多人通话账号,进入后台管理。有一段代码需要我们嵌入页面。我们需要重命名文件并打开文件并修改如下表格并保存:






然后替换文件中的以下代码:






最后在文件下添加,这样我们就可以再次调试站点,看到每篇文章下面都有一个评论框,其他人可以使用这个评论框对文章进行评论。




官方推荐使用Pygments来支持代码高亮。我用的是Tony Bai推荐的高光。js,非常好用,最新版本是8.9。1。只需下载常用代码的高亮支持,它是一个zip压缩文件包,内容如下:






我通常把重点放在。盒。js改为高亮。js调用方便,styles目录下有很多不同类型的高亮方法,都是css文件。接下来,突出显示。将js文件放在www/themes/hyde/static/js/目录下,没有目录自己创建; 把你需要的css文件样式放在www/themes/hyde/static/css目录下。然后在 www/themes/hyde/layouts/partials/head。在html文件中插入以下内容:






因为我更喜欢monokai风格,所以我使用monokai。css,对应monokai。将css复制到刚才提到的css目录下,也可以根据自己的喜好选择其他样式。再次调试网站时,如果内容中有代码,可以发现代码已经上色了,更清晰。




在第一节之前,我们已经注册了Github并创建了一个软件仓库。现在我们需要生成最终页面并上传到我们的Github仓库完成站点的最终部署。只需在www根目录中输入:






这样就会在www目录下生成一个public文件夹来发布官网。执行以下操作上传所有文件:






过程中会要求用户输入github的用户名和密码。密码是隐含的,所以不要以为你没有输入它。上传成功后在浏览器中输入http://username。github。io可以访问你自己的网站。




之前想自己写个博客,觉得可以安心建点东西,于是上网搜了相关方法,最后锁定了hugo软件。我花了一个晚上熟悉了互联网上大神的文档。我是一步一步搭建的,后来用了。早上写了这篇文章,总结了自己构建的方法和过程。如果您有任何问题,请发表评论并提出问题。如果您有任何错误,请更正。