博客搜索引擎优化教程(几天搭建步骤安装Git.js安装HexoGitHub创建个人仓库生成)
优采云 发布时间: 2021-08-28 13:15博客搜索引擎优化教程(几天搭建步骤安装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了。可以先创建一个文件夹blog,然后cd到这个文件夹(或者在这个文件夹下右键git bash打开)。
输入命令
npm install -g hexo-cli
还是用 hexo -v 查看版本
现在安装完成。
接下来初始化hexo
hexo init myblog
您可以为这个我的博客选择任何名称,然后
cd myblog //进入这个myblog文件夹
npm install
创建完成后,指定文件夹目录收录:
hexo g
hexo server
打开hexo服务,在浏览器中输入localhost:4000就可以看到自己生成的博客了。
看起来像这样:
使用 ctrl+c 关闭服务。
4.GitHub 创建个人仓库
首先你需要有一个GitHub账号,所以去注册一个。
注册并登录后,你会在里面看到一个New repository,创建一个新的repository
创建一个和你同名的仓库,最后加上.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"
这里 yourname 输入您的 GitHub 用户名,而 yourremail 输入您的 GitHub 电子邮件。这样GitHub就可以知道你是否对应了它的账号。
您可以使用以下两个来检查您是否输入正确
git config user.name
git config user.email
然后创建SSH并一路回车
ssh-keygen -t rsa -C "youremail"
这时候会告诉你.ssh文件夹已经创建好了。在您的计算机上找到此文件夹。
ssh,简单来说,就是一个秘钥。其中,id_rsa是你电脑的私钥,不能给别人看,id_rsa.pub是公钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接到GitHub自己的账号时,它会根据公钥匹配你的私钥。当它们相互匹配时,您可以通过 git 成功上传您的文件到 GitHub。 .
然后在GitHub设置中,找到SSH keys设置选项,点击New SSH key,复制你id_rsa.pub中的信息。
在gitbash中,检查是否成功
ssh -T git@github.com
6. 将 hexo 部署到 GitHub
这一步我们可以将hexo和GitHub关联起来,也就是将hexo生成的文章部署到GitHub上,打开站点配置文件_config.yml,翻到最后,修改为YourgithubName is your 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 顾名思义,生成静态文章,可以使用hexo g 缩写hexo deploy deploy 文章,可以使用hexo d 缩写
请注意,部署时可能会要求您输入用户名和密码。
如果得到下图,则部署成功。一会儿就可以在网站看到你的博客了! !
7.设置个人域名
现在你的个人网站地址是yourname.github.io。如果觉得这个网址不够用,就需要设置个人域名了。但是要花钱。
注册阿里云账号,在阿里云上购买域名。我买的是。每个后缀的价格都不一样。例如,使用最广泛的 .com 更贵,这取决于个人喜好。
您需要先进行实名认证,然后在域名控制台中才能看到您购买的域名。
点击分析进入并添加分析。
其中192.30.252.153和192.30.252.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网站titlesubtitle网站subtitle description网站description作者你的名字language网站使用的语言timezone网站时间区。 Hexo 默认使用您计算机的时区。时区列表。例如:America/New_York、Japan 和 UTC。
其中description主要用于SEO,告诉搜索引擎一个关于你网站的简单描述,通常建议收录你的网站的关键词。作者参数用于显示主题中文章的作者。
网址
参数说明 URL root网站root 目录 permalink文章 permalink 格式 permalink_defaults permalink 各部分默认值
这里,你需要把url改成你的网站域名。
permalink,即生成某个文章时的链接格式。
比如我新建一个名为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]
Theme是选择的主题,也就是在theme文件夹下,官网有很多主题,默认安装了主题lanscape。当需要更换主题时,到官网下载,将主题文件放在主题文件夹中,然后修改这个参数。
接下来这个deploy是网站的deployment,repo是Repository的缩写。 branch 选择仓库的哪个分支。这个在之前的github页面部署的时候已经修改过了,这里就不赘述了。并且这将在以后的双平台部署中再次使用。
前台
Front-matter 是文件顶部用---分隔的区域,用于指定单个文件的变量,例如:
title: Hello World
date: 2013/7/13 20:46:25
---
以下是预定义的参数。您可以在模板中使用这些参数值并加以利用。
参数描述布局布局标题标题日期创建日期更新更新日期评论启用文章评论功能标签标签(不适用于分页)类别类别(不适用于分页)固定链接覆盖文章URL
其中,需要区分分类和标注。分类是有顺序的、有层次的,也就是说Foo和Bar不等于Bar、Foo;并且标签没有顺序或层次。
categories:
- Diary
tags:
- PS3
- Games
布局(布局)
每次使用代码时
hexo new paper
它实际上默认使用post布局,在源文件夹下的_post中。
Hexo 具有三种默认布局:帖子、页面和草稿。它们对应不同的路径。您自定义的其他布局与 post 相同,将存储在 source/_posts 文件夹中。
布局路径 postsource/_postspagesourcedraftsource/_drafts
新命令实际上是:
hexo new [layout]
只是这个布局默认是post的。
页面
如果你想开始一个新页面,那么你可以使用
hexo new page board
系统会自动在source文件夹下创建一个board文件夹和board文件夹下的index.md,这样你访问的board对应的链接就是
草稿
draft 意思是草稿,也就是如果你想写文章但不想被人看到,那么你可以
hexo new draft newpage
这将在 source/_draft 中创建一个 newpage.md 文件。如果你想在写作时预览你的草稿文件,你可以使用它
hexo server --draft
在本地端口打开服务预览。
如果您的文档草稿已完成并且您想发布它,
hexo publish draft newpage
newpage.md 将自动发送到帖子中。
2.更换主题
此时,如果您觉得默认的风景主题不好看,可以在官网的主题中选择自己喜欢的主题进行修改。点击这里
有 200 多个主题可供选择。但最流行的只是少数,比如NexT主题,非常简洁美观。大多数人都会选择这个,关于这个的教程很多。但是我选择了hueman这个主题,好像是从WordPress移植过来的。显示效果如下:
无论如何,至少符合我个人的审美。
直接从github链接下载,然后放到theme文件夹下,然后用刚才提到的配置文件中theme文件夹的名字替换theme,就会自动在theme文件夹中搜索您配置的主题。
然后进入hueman文件夹,可以看到里面还有一个配置文件_config.xml,好像默认是_config.xml.example,复制并重命名为_config.xml。 这个配置文件是修改你的整个主题配置文件。
menu(菜单栏)
这些是上面菜单栏中的内容。
其中,关于,你找不到网页,因为你的文章中没有关于。如果你愿意,你可以执行命令
hexo new page about
它会在根目录下的源文件夹中新建一个about文件夹和index.md,把你想写的写在index.md中,你就可以在网站上显示了。
如果您想自己自定义另一个菜单栏选项,则只需
hexo new page yourdiy
然后在主题配置文件的菜单栏添加一个Yourdiy:/yourdiy,注意冒号后面的空格,前面的空格要和菜单中的默认对齐。然后在languages文件夹中,找到zh-CN.yml,在索引中添加yourdiy:'Chinese meaning'就可以显示中文了。
自定义
您可以在此处修改您的个人徽标。默认为 Hueman。把你想要的logo放到source/css/images文件夹中,修改url的链接名。
favicon是出现在网站中的小图标的图标。找一个自己喜欢的logo,然后转成ico格式,放到images文件夹,配置好路径。
social_links,可以显示你的社交链接,并且有logo。
提示:
这里可以添加一个rss函数,也就是带有wifi之类的符号的东西。
添加 RSS
1. RSS 是什么?
RSS也是订阅功能。可以理解为类似于订阅公众号、订阅各种博客、杂志等的功能。
2. 为什么要使用 RSS?
就像订阅一个公众号一样,如果你对某个公众号感兴趣,你永远不可能不时搜索这个公众号看到它的文章。博客也是如此。如果您喜欢某个博主或某个平台的内容,您可以通过RSS订阅它们,然后您就可以在RSS阅读器上实时推送这些新闻。现在互联网上的垃圾邮件太多了。如果你每天都在看这些消息,漫无目的地浏览,你的时间只会一点一点地流逝,这是不值得的。如果你关注的博主每次都是新闻的精华,而且没有每天用几十篇文章轰炸你,那么这个博主值得你关注,你可以通过RSS订阅他。
在我的理解中,如果你不想每天被低质量的新闻轰炸,你只是想静静地关注几个博主,每天看一些高质量的内容不需要太多,那么RSS订阅值得你拥有。
3.添加RSS功能
先安装RSS插件
npm i hexo-generator-feed
然后在你整个项目的_config.yml中找到Extensions并添加:
# 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端程序,只有网页版,而且chrome上有插件。使用您的 Google 帐号或您自己在官网注册的帐号登录,即可开始您的后续旅程。
每次需要关注博主时,点击他的RSS链接,复制链接到inoreader即可关注。当然,如果你是比较有人气和实力的博主,直接搜索名字也是可以的。比如大家都非常敬仰的阮一峰大师,直接在读者上搜索阮一峰,应该就可以出来了。
比如阮一峰的网络日志,月光博客,知乎精选等等,都非常不错。当然,还有我! !快点跟我来!你值得拥有:/atom.xml
在Android端,inoreader也可以下载,但由于国内谷歌无法登录,需要在inoreader官网修改密码,然后用账号名密码登录即可。
IOS方面,我之前没用过。看来 reader 3 可以支持 inoreader 账号了。还有一个readon也不错。你可以试试。
小部件(侧边栏)
侧边栏的一个小标签,如果你想自己加一个,比如我加了一个*敏*感*词*,然后我在上面写了community,在zh-CN.yml的侧边栏中添加了communication:'Chinese' .
然后在hueman/layout/widget中添加一个community.ejs并填写模板:
搜索(搜索框)
默认搜索框不可用,
您需要先安装 hexo-generator-json-content 才能使用 Insight Search
它已经告诉你,如果你想使用它,安装这个插件。