响应式建站制作(永久免费linux服务器)

响应式建站制作(永久免费linux服务器)

往期笔记整理

数据结构和算法刷题笔记.pdf下载

找工作简历模板集(word格式)下载

Java基础核心知识大总结.pdf 下载

C/C 常见面试题(含答案)下载

设计模式学习笔记.pdf下载

Java后端开发学习路线 知识点总结

前端开发学习路线 知识点总结

大数据开发学习路线 知识点总结

C/C (后台)学习路线 知识点总结

嵌入式开发学习路线 知识点总结

前 言

建网站本身是一个很大的工程,涉及前端页面的搭建,网站数据的存储,还要购置服务器资源,甚至是后期的维护,过程相当繁琐。

不过如果仅仅是想搭建个人的网站,写写博客,想要美观,又不想操心太多和写博客无关的事情。那么,Hexo Kaze Gitee Pages 的方式就很适合你。

本文就讲下如何借助这三样免费的技术或服务,来搭建一个可访问的静态博客网站。

Hexo 简介Hexo 是什么?

Hexo[1] 是一个快速,简单且功能强大的博客框架。如果你用 Markdown 写博客,Hexo 可以在几秒内生成带有精美主题的静态文件。

Hexo 安装前置要求Node.js(版本 10.13 以上,建议使用 12.0 以上版本)Git安装 GitWindows:下载并安装 git[2]。Mac:使用 Homebrew[3] 安装。Linux(Ubuntu,Debian):sudo apt-get install git-coreLinux(Fedora,Red Hat,CentOS):sudo yum install git-core安装 Node.js

Node.js 为大多数平台提供了 官方安装程序[4]。

替代安装方法:

Windows:使用 nvs[5] 安装它。Mac:使用 Homebrew[6] 安装。Linux(基于 DEB / RPM):与 NodeSource[7] 一起安装。其他:通过相应的软件包管理器进行安装。请参阅 Node.js 提供的指南[8]。安装 Hexo

用 npm 安装 Hexo。

npminstall-ghexo-cli

使用以下指令查看是否安装成功。

hexoversion

如果你想卸载 Hexo,使用以下指令:

npmuninstall-ghexo-cli运行 hexo

安装后,你可以通过 hexo <command> 运行 Hexo。比如通过 hexo help 指令来获取使用帮助。

hexohelp

帮助里提到 hexo init 命令可以创建一个新的 Hexo 文件夹,这个文件夹其实就是利用 Hexo 生成的站点信息了。接下来讲下怎么建站。

Hexo 建站初始化操作

使用 hexo init <folder> 指令就可以在指定文件夹下建立站点信息:

hexoinitjava4u.cn

站点初始化中:

站点初始化完成,会生成指定的文件夹:

目录结构

进入该站点,我们看下目录结构,如下:

这些文件有着各自的职责:

基于这样的结构,Hexo 就具备了生成静态网站的能力。

本地启动

我们先本地启动,看下实际效果。输入以下命令:

hexoserver

Hexo 会启动服务,将默认生成的网站运行在本机的 4000 端口上,可以直接访问 http://localhost:4000 就能看到网站首页,它基于默认主题生成,同时有一篇默认文章。

这个页面只是官方提供的一个样例,看到它就意味着你本地环境跑通了。我们可以通过修改配置的方式,对页面相关元素做调整。

核心配置

以下是我们需要了解或者修改的配置信息。

package.json

这个文件列出了 Hexo 的基本参数信息以及它所依赖的插件。可以看到,EJS[9],Stylus[10] 和 Markdown[11] 渲染器都是默认安装的。

{“name”:”hexo-site”,”version”:”0.0.0″,”private”:true,”scripts”:{“build”:”hexogenerate”,”clean”:”hexoclean”,”deploy”:”hexodeploy”,”server”:”hexoserver”},”hexo”:{“version”:””},”dependencies”:{“hexo”:”^5.0.0″,”hexo-generator-archive”:”^1.0.0″,”hexo-generator-category”:”^1.0.0″,”hexo-generator-index”:”^2.0.0″,”hexo-generator-tag”:”^1.0.0″,”hexo-renderer-ejs”:”^1.0.0″,”hexo-renderer-marked”:”^3.0.0″,”hexo-renderer-stylus”:”^2.0.0″,”hexo-server”:”^2.0.0″,”hexo-theme-landscape”:”^0.0.3″}}

如果后边要切换主题,记得把最后一个默认的主题依赖删除掉。

_config.yml

可设置网站、网址、目录、文章、分类&标签、日期/时间格式、分页和扩展等信息。

网站

参数描述默认值url网址, must starts with http:// or https://http://example.comroot网站根目录,如果放子目录,设置 /blog//permalink文章的 永久链接[13] 格式:year/:month/:day/:title/permalink_defaults永久链接中各部分的默认值pretty_urls改写 `permalink`[14] 的值来美化 URLpretty_urls.trailing_index是否在永久链接中保留尾部的 index.html,设置为 false 时去除truepretty_urls.trailing_html是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)true目录

参数描述默认值source_dir资源文件夹,这个文件夹用来存放内容。sourcepublic_dir公共文件夹,这个文件夹用于存放生成的站点文件。publictag_dir标签文件夹tagsarchive_dir归档文件夹archivescategory_dir分类文件夹categoriescode_dirInclude code 文件夹,source_dir 下的子目录downloads/codei18n_dir国际化(i18n)文件夹:langskip_render跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。文章

参数描述默认值default_category默认分类uncategorizedcategory_map分类别名tag_map标签别名日期/时间格式

Hexo 使用 Moment.js[18] 来解析和显示时间。

参数描述默认值date_format日期格式YYYY-MM-DDtime_format时间格式HH:mm:ssupdated_option当 Front Matter 中没有指定 `updated`[19] 时 updated 的取值,支持 mtime(文件最后修改时间),date(使用 date 的值),empty(不指定)mtime分页

参数描述默认值per_page每页显示的文章量 (0 = 关闭分页功能)10pagination_dir分页目录page扩展

【主题】

参数描述默认值theme当前主题名称。值为false时禁用主题landscapetheme_config主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置无初始配置deploy部署部分的设置meta_generatorMeta generator[20] 标签。值为 false 时 Hexo 不会在头部插入该标签true

【部署】

配置如下:

使用以下指令:

hexonew”test”

或者简写:

hexon”test”

运行服务器

输入以下命令以启动服务器,你的网站会在 http://localhost:4000 下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,你无须重启服务器。

hexoserver

或者简写:

hexos

生成静态文件hexogenerate

或者简写

hexog

监视文件变动立即重新生成。该操作会阻塞命令。

hexog–watch

生成完毕后自动部署网站。

hexogenerate–deploy部署

Hexo 提供了快速方便的一键部署功能,让你只需一条命令就能将网站部署到服务器上。

hexodeploy

或者简写为:

hexodHexo 主题为什么选择 Kaze

Hexo 默认主题为 landscape,但我觉得不够美观,这里推荐 kaze[21] ,它有以下特性:

响应式设计,适配桌面端、平板、手机等各种设备

前端性能优化,加载快速,眨眼之间即可加载完成

图片懒加载,应用懒加载技术加快页面的生成速度资源压缩,提升本地资源请求速度精简设计,不包含 Jquery 等额外库

暗黑模式,享受黑夜的魅力

代码高亮,支持 prismjs

公式渲染,支持 katex 和 mathjax

评论系统,集成 valine、gitalk 和 livere

访问量统计和谷歌分析支持

安装 Kaze

在 your site/themes 下输入

cdthemesgitclonehttps://github.com/theme-kaze/hexo-theme-Kaze.git

安装成功后,会生出目录:hexo-theme-Kaze。

修改站点配置文件 _config.yml 下的主题值为:hexo-theme-Kaze。

用 hexo server 启动 Hexo 服务看下效果。

会看到已经生成了默认的主题,只是很多东西都没有,需要改造一下。

主题配置

可在该主题目录下的 _config.yml 文件里配置。

主题颜色

在 color 中进行配置,以下是默认值。

color:text-color:”#3c4858″text-strong-color:”#2f3d4e”text-light-color:”#909faf”divider-color:”#e6e8ee”title-color:”#475b6d”link-color:”#3273dc”link-hover-color:”#6596e5″info-text-color:”#909faf”widget-background-color:”#fff”body-background-color:”#f2f5f8″border-color:”#e1e4e9″pre-color:”#2d2d2d”code-color:”#50687c”code-background-color:”#e9eaf0″字号与字体

在 font 中进行配置,以下是默认值。

font:font-size:16px#globalfont-sizefont-family:’-apple-system,BlinkMacSystemFont,”SegoeUI”,”HelveticaNeue”,”PingFangSC”,”MicrosoftYaHei”,sans-serif’#globalfont-family站点访问量统计

访问量统计目前仅支持不蒜子,默认关闭,可统计站点总访问量和总访客数。

footer:#————————#pv/uvstatisticsconfig#————————statistics:enable:falsetype:busuanzi#nowversiononlysupportsbusuanzipv:enable:truestyle:本站总访问量{}次#thestylewillbeshownas$1{pv}$2uv:enable:truestyle:本站总访客数{}次#thestylewillbeshownas$1{uv}$2数据分析analytics:enable:falsetype:google#googlegoogle:id:

enable 开启分析支持(默认关闭)

type目前仅支持google

google.id 有关谷歌分析的具体使用说明和 id 使用可以参考谷歌文档[22]

首页文章头图

在文章 Front-matter 中 banner_img 可以设置首页头图

小组件widgets:showWidgetsMobiles:”none”

showWidgetsMobiles : 在窄屏幕上是否显示小组件,none 关闭(默认),flex 开启

关于

关于页面需要自行创建,在站点 source 中新建 about 文件夹并在文件夹内创建 index.md,该文件至少需要包含

#at${yoursite}/about/index.md—title:关于layout:about—社交链接

在 about 下的 social_links中进行配置,主题图标依赖于 iconfont[23],Hexo 内置了一部分社交图标,你可以自定义其他 icon 文件或者解决方案来添加自定义图标。

about:description:descriptionsocial_links:-{icon:icon-github,link:https://xxx}#-{icon:icon,link:yourlink}

友链

友链格式按如下填写即可生成友链页面

links:example-name-1:url:https://example.comavatar:https://example.com/avatar.jpgexample-name-2:url:https://example.comavatar:https://example.com/avatar.jpg文章页搜索功能search:enable:truepath:search.jsonfield:postssearchContent:trueenable 开启搜索功能(默认开启)path 文件名称(暂无用处)field 需要搜索的范围,支持 posts | pages | allsearchContent 搜索文件是否包含正文内容(不建议开启,包含所有文章内容这样会使得搜索文件异常巨大)替代方案是搜索分类标签或使用 algolia 等第三方搜索服务(Todo)目录

主题目录通过 Hexo 原生函数生成,具体可参见 文档[24]

toc:showListNumber:falsemaxDepth:6minDepth:1

showListNumber 是否生成编号

maxDepth TOC 最大深度

minDepth TOC 最小深度

代码高亮

参见代码 高亮文档[25]

数学公式

主题支持 mathjax 和 katex 两种渲染引擎,具体参见 相关文档[26]

enable 开起版权说明(默认开启)

declare 版权声明具体内容,支持 html 语句

style 声明内容样式,与 note 样式相同

Front-matterbanner_img

设置文章与首页头图

banner_img_set

在图片加载时预先加载的图片,可以设置为 loading 图或缩略图等

excerpt

为文章设置在首页显示的简介,还可以通过 <!–more–> 来控制显示

评论

支持 valine,gitalk 和 livere

具体设置可参考主题配置文档说明和相关评论插件文档

字数统计

主题集成 hexo-wordcount[27] 插件,在主题配置文件中设置

wordcount:enable:true

开启(默认开启)

图片画廊

图片画廊功能基于 fslightbox[28],在主题配置文件中设置

fslightbox:enable:true

开启(默认开启)

标签插件

主题集成了一些标签方便书写

note

在 markdown 文件中如下书写即可

{%notestyle%}…markdowncontent{%endnote%}

有五种样式可以选择,primary,success,info,warning,danger

备案信息

你可以在主题配置文件内增加备案信息。

GitHub 和 Gitee 都提供免费的静态网页托管服务。我们可以使用 GitHub Pages 或 Gitee Pages 托管博客、项目官网等静态网页,这样就省去了购买服务器的钱,也不需要耗费太多精力维护。

GitHub Pages 使用很广泛,我之前也用过,不过访问不够稳定,会影响页面加载速度。Gitee 是国内版的 GitHub,访问速度优秀,并且国内发展势头不错,因此我选取 Gitee Pages 来托管我的网站。

建立仓库

申请一个 Gitee 账号,创建一个新的仓库,仓库名尽量和账号名一致,这样可以避免一些因为路径引发的问题。

然后在仓库首页服务一栏开启 Gitee Pages 服务。

开启后,你就拥有了专属的二级域名网址。

注意:仓库内容有变化,需要手动触发更新,页面才能真正生效。

连接仓库

一、安装 hexo-deployer-git[29]。npminstallhexo-deployer-git–save

二、修改配置。deploy:type:gitrepo:git@gitee.com:java4u/java4u.git

三、生成/添加 SSH 公钥

Gitee 、GitHub 提供了基于 SSH 协议的 Git 服务,在使用 SSH 协议访问仓库仓库之前,需要先配置好账户/仓库的 SSH 公钥。

gitconfig–globaluser.namegitconfig–globaluser.email

如果没有就做下配置:

ssh-keygen-trsa-Cyong__1994@163.com

生成后可查看 SSH 公钥:

cat~/.ssh/id_rsa.pub

复制公钥去 Gitee 粘贴,添加。

测试是否连接成功:

ssh-Tgit@gitee.com

上传仓库

执行部署命令,即可将本地资源上传远程仓库。

hexod

手动更新

远程仓库虽然可以看到提交记录,但静态网站不会感知到实时变更,需要去 Gitee Pages 服务页面做下更新。

稍等片刻,访问链接即可看到 Hexo 结合 kaze 主题搭建的静态网站。

参考资料[1]

Hexo: https://hexo.io/docs/

[2]

git: https://git-scm.com/download/win

[3]

Homebrew: https://brew.sh/

[4]

官方安装程序: https://nodejs.org/en/download/

[5]

nvs: https://github.com/jasongin/nvs/

[6]

Homebrew: https://brew.sh/

[7]

NodeSource: https://github.com/nodesource/distributions

[8]

指南: https://nodejs.org/en/download/package-manager/

[9]

EJS: https://ejs.co/

[10]

Stylus: http://learnboost.github.io/stylus/

[11]

Markdown: http://daringfireball.net/projects/markdown/

[12]

时区列表: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

[13]

永久链接: https://hexo.io/zh-cn/docs/permalinks

[14]

permalink: https://hexo.io/zh-cn/docs/variables

[15]

Asset 文件夹: https://hexo.io/zh-cn/docs/asset-folders

[16]

Highlight.js: https://hexo.io/docs/syntax-highlight#Highlight-js

[17]

PrismJS: https://hexo.io/docs/syntax-highlight#PrismJS

[18]

Moment.js: http://momentjs.com/

[19]

updated: https://hexo.io/zh-cn/docs/variables#页面变量

[20]

Meta generator: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#属性

[21]

kaze: https://demo.theme-kaze.top/

[22]

谷歌文档: https://analytics.google.com/

[23]

iconfont: https://www.iconfont.cn/

[24]

文档: https://hexo.io/docs/helpers#toc

[25]

高亮文档: https://demo.theme-kaze.top/highlight/

[26]

相关文档: https://demo.theme-kaze.top/latex/

[27]

hexo-wordcount: https://github.com/willin/hexo-wordcount

[28]

fslightbox: https://fslightbox.com/

[29]

hexo-deployer-git: https://github.com/hexojs/hexo-deployer-git

往期笔记整理

数据结构和算法刷题笔记.pdf下载

找工作简历模板大分享.doc下载Java基础核心知识大总结.pdf 下载C/C 常见面试题(含答案)下载设计模式学习笔记.pdf下载Java后端开发学习路线 知识点总结前端开发学习路线 知识点总结大数据开发学习路线 知识点总结C/C (后台)学习路线 知识点总结嵌入式开发学习路线 知识点总结

发表评论

登录后才能评论