静态网站生成工具，使用hexo+GitPages搭建博客

举报
小哈里 发表于 2022/04/04 20:08:05 2022/04/04
【摘要】 1、静态网站与动态网站静态网站是什么？技术上来讲，静态网站是指网页不是由服务器动态生成的。HTML、CSS 和 JavaScript 文件就静静地躺在服务器的某个路径下，它们的内容与终端用户接收到的版本是一样的。原始的源码文件已经提前编译好了，源码在每次请求后都不会变化。静态网站的优点？加载时间更短，请求的服务器资源更少。内容相对稳定，因此容易被搜索引擎检索。托管没得任何特殊的要求。没得网...

1、静态网站与动态网站

  • 静态网站是什么？
    技术上来讲，静态网站是指网页不是由服务器动态生成的。HTML、CSS 和 JavaScript 文件就静静地躺在服务器的某个路径下，它们的内容与终端用户接收到的版本是一样的。原始的源码文件已经提前编译好了，源码在每次请求后都不会变化。

  • 静态网站的优点？
    加载时间更短，请求的服务器资源更少。
    内容相对稳定，因此容易被搜索引擎检索。
    托管没得任何特殊的要求。没得网络服务器或应用服务器，比如直接从驱动器读取内容。
    静态网站的缺点？
    没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。
    交互性较差，在功能方面有较大的限制。

  • 如何区分静态与动态网站？
    程序是否在服务器端运行，是重要标志。
    在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页， ASP、PHP、JSP、ASPnet、CGI等。
    运行于客户端的程序、网页、插件、组件，属于静态网页，例如 html 页、Flash、JavaScript、VBScript等等，它们是永远不变的。

  • 什么是伪静态？
    动态页面也可以通过服务器端的技术实现采用静态页面的后缀，常见的是Apache和Nginx的Rewrite技术,也就是通常称作伪静态的页面，实际上还是动态页面，只不过是静态化了。
    伪静态是相对真实静态来讲的。
    通常我们为了增强搜索引擎的友好面。都将文章内容生成静态页面。
    但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。
    这就产生了伪静态技术。就是展示出来的是以html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。

2、静态网站生成工具

  • 什么是静态网站生成工具？
    静态 Web 页面生成器在本地计算机或云中生成完整的静态 Web 页面。然后，这些可以存储在服务器中。
    与内容管理系统类似，生成器提供了使用布局模板，分离内容和页面框架，在某些情况下甚至可以从外部 CMS 中提取内容。
  • 什么是CMS内容管理系统？
    是一种位于WEB前端（Web 服务器）和后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。
    CMS最擅长的就是建设网站，最流行的CMS有：国外的：Wordpress，Drupal，Joomla，这是国外最流行的3大CMS。国内则是DedeCMS和帝国，PHPCMS等。国内的CMS会追求大而全，而国外的CMS更注重生态，更注重友好的接口，更多的功能留给第三方开发插件来实现。

    扩展阅读：从静态到动态，再到CMS。

    静态网站：

    很久很久以前，人们做网站很多用静态HTML+CSS+Javascript直接写，也就是静态页面。但是如果有一组页面要维护，对于静态页面来说是一件很麻烦的事，比如我有一个人的Email地址变更了，这一组页面上所有出现的地方都要改。

    动态网站：

    于是就有了适合Web的动态语言，如ASP，PHP，JAVA，.NET等等，它们把数据保存在数据库中，可以动态的引用，这样就能生产出较大规模的网站了，当时诞生了一批大型网站，叫做门户网站，比如新浪，网易，搜狐。

    CMS管理：

    但是他们的内容很丰富，很多，他们有一大批编辑来搜集整理网站的文章，但是总不可能让程序员帮他们把内容上传吧，于是CMS诞生了，通常CMS有一个后台，编辑通过登录后台进入一个可视化的操作界面，把文章录入进去，然后通过上一级的总编审核后发布到网站中。

有名的静态网站生成工具

1、Jekyll（用过）
用 Ruby 写的最受欢迎的开源静态生成工具之一。
实际上，Jekyll 是 GitHub 页面 的引擎，它可以让你免费用 GitHub 托管网站。
官网地址：https://jekyllrb.com/

2、Hugo（见过）
是另一个很受欢迎的用于搭建静态网站的开源框架。它是用 Go 语言写的。
它运行速度快、使用简单、可靠性高。如果你需要，它也可以提供更高级的主题。
它还提供了一些有用的快捷方式来帮助你轻松完成任务。无论是组合展示网站还是博客网站，Hogo 都有能力管理大量的内容类型。
官网地址：https://gohugo.io/

3、Hexo（用过）
一个有趣的开源框架，基于 Node.js。像其他的工具一样，你可以用它搭建相当快速的网站，不仅如此，它还提供了丰富的主题和插件。
它还根据用户的每个需求提供了强大的 API 来扩展功能。如果你已经有一个网站，你可以用它的迁移扩展轻松完成迁移工作。
官网地址：https://hexo.io/

4、Gatsby（知名）
一个越来越流行的开源网站生成框架。它使用 React.js 来生成快速、界面优美的网站。
它提供的成千上万的新插件和主题的能力让我印象深刻。与其他静态网站生成工具不同的是，你可以使用 Gatsby 生成一个网站，并在不损失任何功能的情况下获得静态网站的好处。
它提供了与很多流行的服务的整合功能。当然，你可以不使用它的复杂的功能，或将其与你选择的流行 CMS 配合使用，这也会很有趣。
官网地址：https://www.gatsbyjs.com/

5、VuePress
由 Vue.js 支持的静态网站生成工具，而 Vue.js 是一个开源的渐进式 JavaScript 框架。
如果你了解 HTML、CSS 和 JavaScript，那么你可以无压力地使用 VuePress。你应该可以找到几个有用的插件和主题来为你的网站建设开个头。此外，看起来 Vue.js 的更新一直很活跃，很多开发者都在关注 Vue.js，这是一件好事。
官网地址：https://vuepress.vuejs.org/

6、Nuxt.js
使用了 Vue.js 和 Node.js，但它致力于模块化，并且有能力依赖服务端而非客户端。不仅如此，它的目标是为开发者提供直观的体验，并提供描述性错误，以及详细的文档等。
正如它声称的那样，在你用来搭建静态网站的所有工具中，Nuxt.js 可以做到功能和灵活性两全其美。他们还提供了一个 Nuxt 线上沙盒，让你不费吹灰之力就能直接测试它。
官网地址：https://nuxtjs.org/

7、Next.js（知名）
在 StaticGen 上总排名第一位，足以说明它有多好用了。配置简单，服务端渲染，代码分离，SEO Friendly，内置零配置 TypeScript 支持等等优点。
而且世界一流的大厂们也都在用它做大型的网站，在 Next.js 的 ShowCase 里面有腾讯、Uber、Hulu、Netlify、Nike 这些一流大厂。而且腾讯新闻就是利用 Next.js 开发的。
官网地址：https://nextjs.org/

3、使用hexo+GitPages搭建博客

Hexo是基于node的，上传需要用到git，上传后存储到github上面。

一、配置环境

1、安装Node, 用来生成静态页面的

（1）下载地址：https://nodejs.org/en/
（2）凡是带npm的都是node的命令。
（3）cmd输入node -v查看是否成功配置了环境变量

2、申请GitHub, 项目托管

没账号的创建账号，有账号的创建一个yourname.github.io的公共仓库。

3、安装Git, Mac的话Xcode自带有Git

（1）下载地址：https://git-for-windows.github.io/
（2）打开gitbash并配置github账户信息配置（YourName和YourEail都替换成你自己的）
像这样：git config --global user.name gwj233，git config --global user.email 2403@qq.com
（3）创建本地ssh：ssh-keygen -t rsa -C "2403@qq.com，一路enter并找到/Users/自己电脑用户名/id_rsa.ssh文件，复制里面的ssh。
（4）到github账户设置中更新本地ssh
（5）验证是否配置成功ssh -T git@github.com

二、安装hexo

1、安装hexo软件

这一步详细见官方说明文档入门
（1）创建一个文件夹，存放hexo的软件
（2）终端执行 sudo npm install -g hexo 安装hexo
（3）初始化 hexo init

2、关联hexo和github

  1. 建立关联, 我的blog在本地/Users/blog, 打开_config.yml文件, 翻到最下面, 改成

    deploy:
  type: git
  repo: https://github.com/UserName/BlogName.github.io.git
  branch: master

  2. 执行npm install hexo-deployer-git -save

3、使用git上传hexo文件
  1. 清空旧的网页页面, hexo clean
  2. 生成新的网页页面, hexo generate
  3. 同步到Github上, hexo deploy

参考资料
Hexo官方文档
hexo从零开始到搭建完整
Git本地配置
hexo+Github搭建属于自己的博客
hexo博客搭建+个人定制
20分钟教你使用hexo搭建github博客
hexo搭建的Github博客绑定域名
七牛云

4、hexo博客管理

一、博客管理

1、修改_config.yml

1、网站：标题，描述，语言等。
2、网址：网址、源文稿目录、文章链接
3、其他：日期格式、每页显示的文章量(分页)、
4、拓展：设置主题、配置git

2、指令

1、清除缓存：hexo clean(更改不生效时)
2、生成页面：hexo generate（也可以简写为hexo g）（加-d可以直接部署）
3、部署网站：hexo deploy

4、启动服务器：hexo server（调试用）
5、渲染文件：hexo render <file1> [file2] ...

3、插件

1、Vimeo视频：{% vimeo video_id %}
2、Youtube视频：{% youtube video_id %}
3、等等

4、迁移

1、旧电脑到新电脑：整个文件夹直接搬运(大约100MB)，新电脑配置node.js环境并安装hexo后可以直接使用，无需重新设置任何(毕竟原理只是往github的仓库上更新文件，本地就是源代码和软件而已)。
2、多台电脑管理：

3、一些设置
（1）Ping Github请求超时：到http://github.global.ssl.fastly.net.ipaddress.com/ 找到github的地址，然后修改hosts。

二、Next主题

1、修改_config.yml

1、菜单：关于、分类、标签、归档等等及图标
2、主题：选择next内的主题
3、侧栏：links、社交账号
4、末栏：有待开发
5、其他：头像avatar、作者author、描述description、字体front等

2、第三方服务

1、API：有待开发

2、其他

三、功能调试

1、写作

1、Front-matter
2、视频（外链，功能）
3、图片（本地、床图）
4、音乐
5、公式
6、可视化管理

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Git Hexo 网站
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入