Hexo搭建步骤安装Git.js安装HexoGitHub创建个人仓库生成
优采云 发布时间: 2021-05-06 06:05Hexo搭建步骤安装Git.js安装HexoGitHub创建个人仓库生成
花了几天时间构建了网站,首先链接到它,欢迎访问:方日的个人博客
现在市场上有很多博客,例如CSDN,博客园,建树等平台,可以直接在上面发布。用户互动做得很好,文章所写的内容也可以由百度搜索。缺点是它相对不自由,并且会受到平台上各种限制和令人作呕的广告的影响。
您自己购买域名和服务器并建立博客的成本太高。这不仅对这些购买成本有好处,而且对您自己建立网站并定期维护它的工作对我们来说都是很棒的。对于大多数人来说,确实没有这种精力和时间。
然后还有第三种选择,将我们的博客直接托管在github页面平台上。这样,您就可以放心地编写文章,而无需定期维护,并且hexo是一个快速简洁的博客框架,使用它构建博客确实很容易。
Hexo简介
Hexo是基于Node.js的静态博客框架。它具有较少的依赖性,并且易于安装和使用。它可以轻松生成静态网页并将其托管在GitHub和Coding上。这是博客的首选框架。您可以访问hexo的官方网站以获取详细视图,因为hexo的创建者是台湾人,并且对中文的支持非常友好,因此您可以选择中文进行查看。
本教程分为三个部分,
第一部分
hexo的基本构建以及到github页面的部署,以及个人域名的绑定。
Hexo构建步骤安装Git安装Node.js安装HexoGitHub创建个人仓库生成SSH添加到GitHub将Hexo部署到GitHub设置个人域版本文章 1.安装Git
Git是当前世界上最先进的分布式版本控制系统,它可以高效,快速地处理从很小到很大的项目的版本管理。它是用于管理您的hexo博客文章并将其上传到GitHub的工具。 Git功能非常强大,我认为我建议所有人都来发现它。廖雪峰老师的Git教程写得很好,所以您可以找到它。 Git教程
windows:去git官方网站下载,下载git,下载后会有一个Git Bash命令行工具,以后会用这个工具来使用git。
Linux:对于linux来说太简单了,因为最早的git是在linux上编写的,只需要一行代码即可
sudo apt-get install git
安装后,使用git --version检查版本
2.安装nodejs
Hexo是基于nodeJS编写的,因此您需要在其中安装nodeJs和npm工具。
windows:Nodejs选择LTS版本。
linux:
sudo apt-get install nodejs
sudo apt-get install npm
安装后,打开命令行
node -v
npm -v
检查安装是否成功
顺便说一句,在git中安装Windows之后,您可以直接使用git bash键入命令行,而无需内置cmd,cmd有点难以使用。
3.安装hexo
在安装之前的git和nodejs之后,可以安装hexo。您可以先创建一个文件夹博客,然后将其cd到该文件夹(或右键单击该文件夹下的git bash以将其打开)。
输入命令
npm install -g hexo-cli
仍然使用hexo -v检查版本
到目前为止,所有安装均已完成。
接下来初始化hexo
hexo init myblog
您可以为此Myblog选择任何名称,然后
cd myblog //进入这个myblog文件夹
npm install
创建完成后,指定的文件夹目录收录:
hexo g
hexo server
打开hexo服务,然后在浏览器中输入localhost:4000来查看您生成的博客。
它看起来像这样:
使用ctrl + c关闭服务。
4. GitHub创建了一个个人存储库
首先,您需要有一个GitHub帐户,所以要注册一个。
注册并登录后,您将在其中看到一个新存储库,创建一个新存储库
使用与您的用户名相同的用户名创建一个仓库,并在其后添加.github.io。只有通过这种方式,将来将其部署到GitHub页面xxxx.github.io时,它才能被识别,其中xxx是您的注册GitHub用户名。我已经在这里建好了。
点击创建存储库。
5.生成SSH并将其添加到GitHub
回到您的git bash,
git config --global user.name "yourname"
git config --global user.email "youremail"
在这里,您的姓名输入您的GitHub用户名,而youremail输入您的GitHub电子邮件。通过这种方式,GitHub可以知道您是否对应于其帐户。
您可以使用以下两个命令来检查输入是否正确
git config user.name
git config user.email
然后创建SSH并完全按Enter键
ssh-keygen -t rsa -C "youremail"
这时,它将告诉您.ssh文件夹已创建。在计算机上找到此文件夹。
简而言之,
ssh是一个秘密密钥。其中,id_rsa是计算机的私有密钥,不能显示给他人,而id_rsa.pub是公共密钥,可以随便显示给他人。将此公钥放在GitHub上,以便当您链接到GitHub自己的帐户时,它将根据公钥匹配您的私钥。当它们相互匹配时,您可以通过git成功将文件上传到GitHub。
然后在GitHub设置中,找到“ SSH密钥”设置选项,单击“新建SSH密钥”以将信息复制到id_rsa.pub中。
在gitbash中,检查是否成功
ssh -T git@github.com
6.将hexo部署到GitHub
在此步骤中,我们可以将hexo与GitHub关联,即将hexo生成的文章部署到GitHub,打开站点配置文件_config.yml,转到最后,并将其修改为YourgithubName是您的GitHub帐户
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
这时,您需要先安装deploy-git,这是部署命令,以便可以使用该命令将其部署到GitHub。
npm install hexo-deployer-git --save
然后
hexo clean
hexo generate
hexo deploy
Hexo clean可以删除您之前生成的内容,或者您不需要添加它们。 hexo generate顾名思义,生成static 文章,可以使用hexo g的缩写。hexo deploy deployment 文章,可以使用hexo d的缩写
请注意,部署时可能会要求您输入用户名和密码。
如果得到下面的图片,则说明部署成功。您可以在网站此处看到您的博客! !
7.设置个人域名
现在您的个人网站的地址是yourname.github.io,如果您认为此URL还不够,则需要设置一个个人域名。但这要花钱。
注册一个阿里云帐户并在阿里云上购买域名。我买的是。每个后缀的价格都不同。例如,根据个人喜好,使用最广泛的.com较为昂贵。
您需要先执行实名身份验证,然后在域名控制台中,可以看到您购买的域名。
点击分析以输入并添加解析。
其中,19 2. 3 0. 25 2. 153和19 2. 3 0. 25 2. 154是GitHub的服务器地址。请注意,默认情况下会选择分辨率线,请不要像我一样选择海外。该海外地点稍后将用于*敏*感*词*转移,将在以下博客中进行讨论。记住现在选择默认值! !
登录GitHub,输入之前创建的仓库,单击设置,设置“自定义域”,然后输入您的域名
然后在您的博客文件源中创建一个名为CNAME的文件,不带后缀。输入您的域名。
最后,在gitbash中,输入
hexo clean
hexo g
hexo d
不久之后,您将打开浏览器,输入自己的域名,您将看到内置的网站!
接下来,您可以正式开始编写文章。
hexo new newpapername
然后在source / _post中打开markdown文件,就可以开始编辑了。完成写作后,
hexo clean
hexo g
hexo d
第二部分
hexo的基本配置,改变主题,实现多终端工作,并在编码页面部署中实现*敏*感*词*发行。
1. Hexo基本配置
文件根目录中的_config.yml是整个hexo框架的配置文件。您可以在其中修改大多数配置。有关详细信息,请参阅官方配置说明。
网站
参数描述title 网站标题subtitle 网站 subtitle description 网站描述作者的名字语言网站使用语言timezone 网站时区。 Hexo默认使用计算机的时区。时区列表。例如:America / New_York,日本和UTC。
其中,描述主要用于SEO,告诉搜索引擎有关您网站的简单描述,通常建议您添加网站 关键词。 author参数用于显示主题文章的作者。
URL
参数说明url URL根网站根目录永久链接文章永久链接格式permalink_defaults永久链接各部分的默认值
在这里,您需要将URL更改为您的网站域名。
永久链接,这是您生成特定文章时的链接格式。
例如,如果我创建一个名为temp.md的新文章,则他的自动生成的地址为。
以下是一个官方示例。关于链接有很多变量。如果需要,可以访问官方网站以找到永久链接。
参数结果:year /:month /:day /:title / 2013/07/14 / hello-world:year-:month-:day-:title.html2013-07-14-hello-world.html: category /:titlefoo / bar / hello-world
再次向下滚动,中间的所有这些都将默认设置为正确。
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
branch: [branch]
主题是要选择的主题,即在主题文件夹下,官方网站上有很多主题,并且默认情况下已安装主题lanscape。当您需要更改主题时,请在官方网站上下载主题,将主题文件放在主题文件夹中,然后修改此参数。
接下来,此部署是网站的部署,而repo是存储库的缩写。分支选择仓库的哪个分支。在先前的github页面部署期间已对此进行了修改,因此在此不再赘述。这将在以后的双平台部署中再次使用。
前题
前部内容是文件顶部用-分隔的区域,用于指定各个文件的变量,例如:
title: Hello World
date: 2013/7/13 20:46:25
---
以下是预定义的参数。您可以在模板中使用这些参数值并加以利用。
参数说明布局布局布局标题标题日期创建日期已更新更新日期注释启用文章注释功能标签标记(不适用于分页)类别类别(不适用于分页)永久链接覆盖范围文章 URL
其中,需要区分分类和标签。分类是顺序的和分层的,这意味着Foo和Bar不等于Bar,Foo;和标签没有顺序或层次。
categories:
- Diary
tags:
- PS3
- Games
布局(布局)
每次使用代码时
hexo new paper
默认情况下,它实际上使用帖子布局,该布局位于源文件夹下的_post中。
Hexo具有三种默认布局:帖子,页面和草稿。它们对应于不同的路径。您自定义的其他布局与post相同,并将存储在source / _posts文件夹中。
布局路径postsource / _postspagesourcedraftsource / _drafts
新命令实际上是:
hexo new [layout]
只是默认情况下此布局是发布的。
页面
如果您要开始一个新页面,则可以使用
hexo new page board
系统将自动在源文件夹下创建一个木板文件夹,并在该木板文件夹中创建index.md,以便与您访问的木板对应的链接为
草稿
草稿表示草稿,也就是说,如果您想写文章但又不想被别人看到,那么您可以
hexo new draft newpage
这将在source / _draft中创建一个newpage.md文件。如果要在编写过程中预览草稿文件,则可以使用
hexo server --draft
在本地端口中打开服务预览。
如果您的文档草稿已完成并且要发布,
hexo publish draft newpage
newpage.md将自动发送到帖子。
2.更改主题
在这一点上,如果您认为默认的风景主题不好看,则可以在官方网站的主题中选择要修改的主题。点击这里
有200多个主题可供选择。但是,最受欢迎的只是少数几个,例如NexT主题,它非常简洁,美观。大多数人都选择这一本书,关于这一本书有很多教程。但是我选择了hueman的主题,该主题似乎是从WordPress移植的。显示效果如下:
无论如何,至少它符合我的个人审美观。
直接从github链接下载它,然后将其放在主题文件夹下,然后将主题替换为刚才提到的配置文件中主题文件夹的名称,它将自动在主题文件夹中搜索您配置的主题。
然后进入hueman文件夹,您可以看到其中还有一个配置文件_config.xml,似乎默认情况下是_config.xml.example,将其复制并重命名为_config.xml。 。此配置文件用于修改您的整个主题配置文件。
菜单(菜单栏)
这些是上方菜单栏上的东西。
在其中,您找不到[关于]的页面,因为文章中没有任何关于。如果需要,可以执行命令
hexo new page about
它将在根目录下的源文件夹中创建一个新的about文件夹和index.md,并在index.md中写入要写入的内容,然后可以在网站上显示它。
如果您想自己自定义另一个菜单栏选项,则只需
hexo new page yourdiy
然后在主题配置文件的菜单栏中添加Yourdiy:/ yourdiy,请注意冒号后的空格,其前面的空格应与菜单中的默认空格保持整齐。然后在语言文件夹中找到zh-CN.yml,并在索引中添加yourdiy:'中文含义'以显示中文。
自定义
您可以在此处修改个人徽标。默认值为hueman。将所需的徽标放在source / css / images文件夹中,然后更改URL的链接名称。
采集夹图标是出现在网站中的小图标的图标。找到所需的徽标,然后将其转换为ico格式,将其放在images文件夹中,然后配置路径。
social_links,您可以显示您的社交链接,并且有徽标。
提示:
您可以在此处添加rss函数,即带有wifi之类的符号的东西。
添加RSS
1.什么是RSS?
RSS也是订阅功能。您可以将其理解为类似于订阅官方帐户,订阅各种博客,杂志等的功能。
2.为什么使用RSS?
就像订阅正式帐户一样,如果您对某个正式帐户感兴趣,则不能总是不时搜索该正式帐户以查看其文章。博客也是如此。如果您喜欢某个博客作者或某个平台的内容,则可以通过RSS订阅它们,然后可以在RSS阅读器上实时推送这些新闻。 Internet上现在有太多垃圾邮件。如果您每天都花时间观看这些消息并漫无目的地浏览,那么您的时间只会一点一点地流逝,这是不值得的。如果您关注的博客作者每次都是新闻的精华,并且每天都不会轰炸您数十篇文章,那么您值得关注此博客作者,您可以通过RSS订阅他。
据我了解,如果您不想每天被质量低劣的新闻轰炸,您只想静静地关注一些博客,并且每天都不需要太多的时间来观看高质量的内容,那么RSS订阅值得您拥有。
3.添加RSS功能
先安装RSS插件
npm i hexo-generator-feed
然后在整个项目的_config.yml中找到扩展,并添加:
# Extensions
## Plugins: https://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
这时,您的RSS链接是域名/atom.xml。
因此,在主题配置文件中的社交链接中,打开RSS页面功能,以便在网站上具有带有wifi之类的符号的RSS徽标。注意空格。
rss: /atom.xml
4.如何关注RSS?
首先,您需要一个RSS阅读器,在这里,我推荐inoreader,这是世界上第一个RSS阅读器,并且中文支持非常好。但是它没有PC端程序,只有Web版本,并且在chrome上有插件。使用您的Google帐户或您自己的注册帐户登录官方网站,您可以开始接下来的旅程。
每次您需要关注博主时,请单击其RSS链接,然后将该链接复制到inoreader上以进行跟踪。当然,如果您是一个更受欢迎,更强大的博客作者,则可以直接搜索该名称。例如,每个人都非常欣赏的阮一峰大师直接在读者身上搜索阮一峰,它应该可以出来。
例如,阮一峰的网络日志,Moonlight博客,知乎选择等都非常好。当然有我! !快跟我来!您应得的:/atom.xml
在Android方面,也可以下载inoreader,但是由于国内Google无法登录,因此您需要在inoreader官方网站上更改密码,然后才能使用帐户名和密码登录。
在IOS方面,我以前从未使用过它。阅读器3似乎可以支持阅读器帐户。还有一个readon,也很好。您可以尝试一下。
小工具(侧边栏)
侧边栏中的一个小标签,如果您想自己添加一个,例如,我添加了联系信息,然后在其上编写通讯,然后在zh-CN.yml的侧边栏中添加通讯:“中文”
然后在hueman / layout / widget中添加一个community.ejs并填写模板:
搜索(搜索框)
默认搜索框不可用
使用Insight Search之前,您需要安装hexo-generator-json-content
它已经告诉过您,如果您想使用它,请安装此插件。