github设置中文_利用 Github+Hexo 搭建个人博客网站

news/2024/5/20 6:27:26/文章来源:https://blog.csdn.net/weixin_39654917/article/details/111223226

463a8846b58b0fb803005e8fbecb1674.png

题图:by watercolor.illustrations from Instagram

阅读文本大概需要 3 分钟。

1 什么是 Hexo?

Hexo 是一个基于 node.js 制作的快速、简洁且高效的博客框架。Hexo 可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。2 Hexo VS Jeklly•本地环境Jeklly 是由 Ruby 语言编写,需要到官网下载并安装 RubyInstaller。Hexo 则需要安装 Node.js 环境。网上经常看到很多人吐槽安装 Jekyll 经常碰到各种问题。我分别在 Windows 下安装过这两个环境。整个流程跑下来还是挺顺利的。•速度说是比较 Hexo 和 Jeklly 这两个框架,其实要比较 Ruby 和 Node.js 的运行速度。Node.js 是一个 Javascript 运行环境(Runtime)。实际上它是对 Google V8 引擎进行了封装。众所周知,Google JS Runtime 速度非常快,性能非常好。在本地预览上,Jekyll 是生成了页面然后进行预览,而 Hexo 是没有在根目录生成文件的,速度也快不少。因此,Hexo 在性能和速度上面更胜一筹。•部署Jeklly 是将整个工程源码上传到 Github 仓库,然后 Github 会自动生成静态文件。而 Hexo 需要事先在本地生成整个站点页面,再将 Html 文件、资源文件等上传到 Github 上。•主题Jekyll 使用 Liquid;它是有 Ruby 语言编写的开源模板语言。Hexo 使用的是 EJS;EJS 是 JavaScript 模板库,用来从 JSON 数据中生成 HTML 字符串。EJS 相对比较复杂,所以可实现的功能更加的多。从开发一个主题难度上看,Hexo 实现起来更方便、更简单些。•生态一个产品能不能快速上手,要看其生态圈是否完善。在文档说明配套方面,Hexo 更加完善。我们能在 Hexo 官网上找到中文的文档说明。Jeklly 的中文文档还是广大网友自发组织翻译的。从主体方面上看,Hexo 官网就有主题跳转链接,目前一共有 280 个主题;这 Jeklly 是无法比拟的。再者,相比 Ruby,Node.js 使用的人群更广, 火爆程度更好。因此,我们通过搜索引擎搜索问题时,搜到 Hexo 的资料量会大于 Jeklly,这也是造成网友吐槽 Jeklly 的原因。

3 创建 Github 项目

我们是将网页托管到 Github Pages 上,这部分就不再花篇幅去详细介绍,具体可以参考《利用Github+Jeklly搭建个人博客网站》的内容。简单来说,就是创建一个 Github 项目,项目名称命名格式是 username.GitHub.io

4 搭建本地 Hexo 环境

安装后,分别以下命令来检测 Node.js 和 npm 是否安装成功首先我们需要到 Node.js 官网,根据自己系统平台以及系统版本下载 Node.js 安装包,安装的时候记得将 node.js 添加到系统变量中。

41cf375e3a8540c3c552414dda7b0df4.png

能看到版本号,说明 Node.js 环境安装成功。然后我们使用 npm 来安装 Hexo。
$ npm install -g hexo-cli

5 构建本地项目

在本地磁盘中,创建一个名为 Github_blog 的文件夹,用来保存网站项目的文件。接着,通过终端执行命令来初始化 Hexo 工程。
$ hexo init monkey-soft.github.io  # 创建工程名,随意命名$ cd monkey-soft.github.io$ npm install # 安装 node 所需模块
执行完命令之后,我们能看到 Github_blog 多出一个 monkey-soft.github.io 的子文件夹,里面还有 Hexo 默认生成的文件。

5b3f4b462efa0cc8b81059502fdf33d1.png

•deploy_gitHexo 借助 Git 推送网站信息到 Github 仓库所生成的文体。•public 执行生成站点文件的命令,即hexo g,Hexo 将自动生成静态网页和资源文件都保存到这里•scaffolds 模版文件夹。当我们新建文章时,Hexo 会根据 scaffold 来建立 Markdown 文件。•source 里面有个 _posts 文件夹,存放着我们以 Markdown 语法创造内容的文件。•themes Hexo 主题存放的文件夹•_config.yml Hexo 项目的配置文件,配置网站的基本信息、网页 URL 路径、时间格式、文章分页、扩展插件等信息。这里的 Site 配置建议都修改下。

4006b53420914ecfa23f3c4b9758b73a.png

   

6 主题选择

当我们创建 Hexo 项目之后,项目中默认会有一个名为 landscape 的主题。如果你觉得默认主题不够美观,可以自行到 Hexo 官网选择适合自己的主题。为了方便大家选择,推荐 10 大明星主题。排名根据目前 Github 上 Star 数依次降序排列。

【iissnan / hexo-theme-next】 Stars:14.9K地址:https://github.com/iissnan/hexo-theme-next【litten / hexo-theme-yilia】 Stars:7.1K地址:https://github.com/litten/hexo-theme-yilia【theme-next / hexo-theme-next】 Stars:4.6k地址: https://github.com/theme-next/hexo-theme-next【viosey / hexo-theme-material】 Stars:3.8K地址:https://github.com/viosey/hexo-theme-material【tufu9441 / maupassant-hexo】 Stars:2.1K地址: https://github.com/tufu9441/maupassant-hexo【LouisBarranqueiro / hexo-theme-tranquilpeak】 Stars:1.6K地址:https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak【blinkfox / hexo-theme-matery】 Stars:1.4K地址:https://github.com/blinkfox/hexo-theme-matery【ahonn / hexo-theme-even】 Stars:1.1K地址:https://github.com/ahonn/hexo-theme-even【forsigner / fexo】 Stars:1K地址:https://github.com/forsigner/fexo【fi3ework / hexo-theme-archer】 Stars:942地址:https://github.com/fi3ework/hexo-theme-archer将从 Github 上下载的主题,复制到 theme 文件夹中。9d055ed486b52238f0c3c2393827f884.png最后需要在 _config.yml 指定 Heox 主题。

57948e3dab290a9e3ef82e77cd56c40b.png

 

7 开始写作

source\_posts目录下,新建一个 .md 文件。默认的命名方式是 year-:month-:day-:title.md。如果你想修改这个命名规则,可以在 Hexo 目录下的 _config.yml 文件中,找到 # Writing 字样,然后进行修改。

275cf71fbe8b9bbe263bffc3704ffc68.png

不过我不建议修改这命名规则,这格式能一目了然。知道我们创作文章是什么时候?文章的标题是什么?

5b54049c708a128957d208ffce75569a.png

创建 md 文件之后,需要在文件头部指定一些信息。
---layout: posttitle:  "文章标题"date:   2019-12-16 22:35:13categories: [文章分类]tags: [文章标签1, 文章标签2]---

8 SEO 优化

不得不说, Hexo 很人性化,有考虑到网站开发者会做 SEO 优化工作,在模板语言的可选变量中就有 id 选项。因此,设置 post_id 的链接方法有两种。关于固定链接,还是“三不二建”的套路。1.日期不要出现在固定链接中。会让搜索引擎爬虫认为是过期内容,导致不再爬取 2.链接的层次不要太深。默认的固定链接是 /年/月/日/文章名。这种层次过深,不方便搜索引擎爬虫的抓取,对搜索引擎的收录不太友好。3.链接中不要出现中文。4.建议使用 post_id 形式来设置固定链接。5.建议使用英文缩写或英文来设置固定链接。这里直接利用 :id(文章ID) 变量能实现效果。针对以上两种建议优化,我给出一个兼容两者的方案。Hexo 目录下的 _config.yml 文件中,修改永久链接的显示方式。

99f495e47a1e98e148786d4c3138b75b.png

这里 :urlname 变量可以显示为数字或者英文内容。我为了实现 post_id 形式,同时保证 post_id 有一定的跳跃性,在 id 后面拼接个月号数。接着,在 md 文件的头部信息中,需要增加一个 urlname 字段, 设置文章的 id 号。
urlname: 1
如果文章的名字是 2019-12-16-titie.md,那么显示的永久链接是 121.html网站有说法是百度搜索对 Hexo 站点搜索不友好,原因是百度搜索屏蔽了 Github pages。但其实也是有方法来规避这种规则。用户一般是通过关键字从搜索引擎搜索我们网页内容,所以我们需要给页面设置关键字和页面描述,能命中用户搜索的关键字。当然前提是要被搜索引擎收录。首先,在 md 文件中,增加两个字段。
keywords: [关键字1, 关键字2, 关键字3]description: 页面描述(一句话总结文章在讲什么?)
然后分别到百度搜索引擎提交入口和谷歌搜索引起提交入口,提交自己的域名地址。在这里之前,建议先购买一个域名,然后在 Github 设置域名重定向。百度域名提交地址https://ziyuan.baidu.com/dashboard/index谷歌域名提交地址https://www.google.com/webmasters/tools/dashboard?hl=zh-CN我们这么做是化被动为主动。自己网站会被搜索引擎爬虫收录,但不知道等到猴年马月。不如我们主动出击,自己主动我们网站地址,让搜索引擎知道我们网站,会加速收录速度。

9 个性化优化

Hexo 很多主题可玩性很高, 如果你感兴趣可以感觉个人喜好对主题内容进行一些定制化修改。这里涉及主题比较多,就是一一讲解。大家可以通过 Github 主题说明文档以及搜索引擎来了解相关信息。

留言打卡 DAY 51

今日的留言话题是:(只要我忘记开留言,日期就往后 +1 就行?‍♂️)你有搭建过自己的博客吗?最近准备搭建一下 zone7 的博客,欢迎持续关注!    留言打卡送福利(点击链接查看详细打卡规则),请按照 昵称+天数(请以自己实际打卡的天数为准,如day1 or day2 or day3)+ 留言内容(不少于15字)的方式留言。

往期推荐:

Jupyter也能交互可视化?

2019年终总结

Python 打包的现状:包的三种类型

编程面试题库

e516b14e6d0c3a2d72e4336bd947d9d5.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_810322.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html网站中怎么更新站点,如何升级你的网站全新改进升级到HTML5

升级到HTML5是相当容易的,因为它与HTML4兼容。事实上,我们没有理由摒弃HTML4的所有,因为HTML5只是一个简单的增加一堆新而酷的功能 添加到HTML4核心语言。升级(如果你是这样认为)到HTML5是非常简单的。你所需要做的的是修改你的DOCTYPE。这种…

django从0到1搭建网站

曾经有人说我前端很水,那么在这一系列文章中我打算把前后端融合在一起来做一次网站的全面重构,希望可以把刚刚入行的同学带上正途 请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址 聊聊工程 如今,数据科学家已经…

linux设置网站的错误页面,轻松几步设置nginx的404错误页面

众所周知设置404页面能够帮助网站有效的避免出现死链、避免降权惩罚和降低信任度,而最重要的一点是能够提升用户的体验,引导用户到网站其他页面继续浏览。那么我们如何在nginx中设置404页面呢?在本文中课课家笔者就为大家介绍具体的方法步骤供…

一匿名黑客组织拿下近20%黑市网站:仅用21个步骤实现

1万多个Tor网站遭匿名黑客组织攻击,当访问者进入这些网站时会看到以下信息--“Freedom Hosting II(以下简称FH2),你已经被攻击。”据独立安全调查员Sarah Jamie Lewis公布的一份报告显示,FH2总共运行了近20%的黑市网站。而没过多久&#xff0…

BlogEngine.Net架构与源代码分析系列part14:实现分析(下)——网站页面上值得参考的部分...

BlogEngine.Net的成功不仅在于它的架构设计,它的代码实现细节也都是很经典的,每个结构分割的很清晰很自然,希望大家多多品位一下。在这篇文章里我将给大家介绍一下BlogEngine.Net的Web实现上的几个亮点,包括Web.config&#xff0c…

【第一期】如何打造属于自己的网站编辑器——CKEditor与UEditor之争

首先说明一下由于经常写项目最近比较忙,所以一直没时间整理文章,现在把近阶段的一些心得分享出来,这是第一期,接下来我会跟大家讲讲ASP.NET单层,三层,以及多层开发企业建站和具体要求和操作,希望…

网站上显示农历及阳历节日

把阳历日期转换为农历用到的函数为ChinaDate.ConvertToNongLi(DateTime.Now); 得到节日的函数为 ChinaDate.GetFestival(DateTime.Now); 代码: using System.Globalization; using System.Collections; using System;namespace NetWeb2011.Common {public static cl…

AWWWB 网站克隆器 v1.0 发布

软件名称:AWWWB.COM网站克隆器1.0 开发商(主页):www.awwwb.com 联系人:awwwb.comqq.com 软件性质:免费软件/开源软件 软件描述: AWWWB.COM网站克隆器:输入被克隆网站的首页网址&…

一个Java语言所写的shop网站框架明细

核心框架Spring Framework :作为一个优秀的开源框架,是为了解决企业应用程序开发复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架。 模板引擎FreeM…

iframe懒加载_wordpress网站视频和图片懒加载插件的对比与使用 a3 Lazy Load

都说wordpress网站速度慢,三人成虎,养虎为患,今天就推荐个使wordpress网站提速度的插件。特别是图片或者视频较多的站,用个懒加载插件将大大减少一时的http(s)请求、减少服务器端压力,使服务器按需加载。对于用户体验&…

php教育网站设计案例_UI设计素材模板|设计良好的教育网站:3个快捷技巧

拥有一个高质量的学校网站比以往任何时候都更重要。优秀的UI设计素材模板,帮助设计师和管理人员建立最好的教育网站。从成功的设计中寻找灵感!3个快捷技巧1. 使用教育专用的网站构建器首先,用专门教育内容管理系统(CMS)来制作学校网站是个好主…

服务器内部移动文件速度慢,网站打开速度慢的原因分析已经解决排查方案(实用大全)...

72018/7网站打开速度慢的原因分析已经解决排查方案(实用大全)飞鸟哥上百个案例,3天整理,实证案例,全面,实用!假如你是网站提供者,或者网站运营者看下文本给你专业全面的经验。飞鸟哥,根据10年经验&#xff…

秒杀全网!研发、运营必备实用工具网站

目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、招聘求职 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 12、音乐 13、神辅助工具 14、语音处理 15、大数据 16、电子书 程序员开发需要具…

【织梦插件】xenu软件-网站url和死链提取工具免费下载

软件名称xenu软件作用网站网址提取工具适宜人群SEO网址http://www.jingdouwang.cn/zygx/wzcj/278.html 软件简介: Xenu Link Sleuth 可能是你所见功能最强大的网站死链接查询的软件了。使用方法简单,仅需要输入网站URL就可以完成死链查询。用户可直接查看…

IIS部署,发布网站

因项目需要,正在学习如何部署IIS服务,发布网站,将遇到的问题记录下。 一、IIS部署 1.打开控制面板,选择 ‘程序’ 2.程序和功能下,选择打开或关闭Windows功能 3.等待加载,选择Internet信息服务&#xff0…

网站业务架构演变过程

有一天,我突发奇想创建了一个站点,基于LNMP架构,起初只有我自己访问,后来因为我点儿正,访问量越来越大,所以最终导致下面的架构演变。1. 单台机器因为只是一个小站,访问量一天也没有多少uv&…

做网站服务器e3,用e3做游戏服务器

用e3做游戏服务器 内容精选换一换下面以CentOS 6.9 (x86_64)操作系统为例,举例介绍裸金属服务器增强高速网卡的配置方法。RedHat系列、Oracle Linux系列、Euler系列及CentOS系列操作系统的配置方法类似。以“root”用户,使用密钥或密码登录裸金属服务器。…

Python+Flask+MysqL的web建设技术开发一个网站

一、摘要 flask是一个很精简,灵活的框架,对于web的开发非常的好,具有jinja2强大的模板引擎的支持。flask框架的一个扩展就是sqlalchemy, sqlalcheny是flask的一个扩展。sqlalcheny是一个强大的关系型数据库框架,它是一个框架&…

MCSE笔记 第四章 IIS网站架设

以前大学时候上过网络操作系统这门课程,当时用的是Windows 2003弄的IIS,工作中接触过2008、2003系统搭建的IIS,都不太熟悉,最近看的戴有炜老师的2012网络管理与架站,整理一下IIS章节的笔记。大致内容如上图所示:1.安装…

网站规划通识:原型图绘制的一些注意事项

本文来自网易云社区作者:林玮园 雷火游戏部 网站组基本概念: 一、什么叫原型图?用线条、图形描绘出产品/专题的框架,即为原型,也可称线框图。原型图的输出可根据质量,大致分为低保真、中保真、高保真原型图…