入门
如何做到白嫖免费搭建呢?服务器使用别人的就可以啦,比如GitHub Pages~
网站增加文章的话还得懂网页开发?当然不需要啦,使用Hexo帮你搭建一套个人网站就可以啦~
增加网站内容会不会比较麻烦?这都啥时代啦,使用Markdown工具Typora发布内容非常方便哦~
刚才提到了三个关键词,解释如下:
名词 | 解释 |
---|---|
GitHub Pages | 我们访问的任意网站都是放在服务器上的,通过域名或者说网址为我们提供服务,GitHub Pages就是为我们提供域名和服务器的,域名为GitHub.io的子域名 |
Hexo | 有了服务器还需要有一套网页的模板,还需要开发网页?Hexo提供了丰富的网页模板和插件,帮助我们更好的个性化和维护自己的网站 |
Typora | 增加网页的特点离不开文章内容的编写,文字、图片、视频、音乐等等,一个高效的编写工具尤为重要,Typora是一个文档编辑软件,基于Markdown语法开发保证了编写的效率,另外支持实时渲染,所见即所得,从而脱颖而出,成为目前最亮眼的Markdown文档编辑工具 |
使用GitHub+Hexo+Typora搭建的免费网站,演示如下:
==为了方便理解,这里以后会放一个演示视频,先放这里占个位置,后期补上来(●ˇ∀ˇ●)==
基础
GitHub提供了pages服务,即静态网页访问服务。因此咱们只需要按照GitHub的要求,创建一个GitHub pages仓库,就相当于拥有一个搭建网站的服务器啦。
而有了服务器咱们还需要些代码来完成网页的开发,小白表示太不友好了/(ㄒoㄒ)/~~。幸好有大神帮我们开发好了一套友好的框架叫Hexo,咱们主要学会安装部署,再学会Markdown文章高效编写就可以啦。
当然使用Gitee或者Coding也支持pages服务,如果觉得GitHub慢的小伙伴也可以用这两个哦,只是个人习惯了GitHub,也是全世界代码分享的平台(男性交友平台),不想放弃啊🤭。
另外Hexo也有替代产品,如果不喜欢折腾,想快速搭建的也可以使用gridea来快速搭建博客,适合非开发人员或爱好者,使用gridea可以参考这篇文章。
下面咱们回归正题,使用GitHub Pages+Hexo开始搭建(折腾)吧,说不定等gridea各方面都完备了,就转过去了🤭。
免费的服务器-GitHub
创建GitHub账号,注册地址
注册页面
填好自己得个人信息,注意Username使用英文;
信息填写
选择免费的版本,并且点击继续,填写个人的一些信息后,点击Submit完成注册。
注册成功后的界面
注册成功后,看到以上的界面信息就表示注册成功了。
创建GitHub Page仓库
点击右上角的加号选择New repository来创建一个GitHub Pages
创建仓库
创建仓库的名称(也作为将来的域名),注意图中的要求,仓库名称必须是用户名.github.io,其中用户名是注册时填写的Username字段。
填写仓库名称
然后点击最下面的Create repository创建仓库就可以了。
安装Git工具
Git是一个版本管理工具,可以方便的使用Git命令管理你的仓库。
如果是64位的windows可以选择图中相关的安装文件,下载后安装即可
Git工具下载
下载并安装完成后,打开Git Bash应用
Git Bash应用
打开后,如图所示
Git Bash命令行
在命令行中输入全局配置,user.name和user.email配置信息
bash
1 | git config --global user.name "你的GitHub用户名" |
生成ssh密钥文件,提示内容时直接回车即可:
shell
1 | ssh-keygen -t rsa -C "你的GitHub注册邮箱" |
创建成功后,大概是这个样子,注意红色框框的文件,需要打开,把内容拷贝到GitHub上去。
image-20210223152128655
打开GitHub_Settings_keys 页面,新建new SSH Key
新增SSH Key
标题Title可以随便写,增加成功后在Git Bash命令行中,输入
shell
1 | ssh git@github.com |
输入后,得到红框中的内容说明SSH Key设置成功
SSH Key设置成功信息
设置SSH Key的原因是,当我们编写好文章后,需要通过Git命令把内容推送给GitHub服务器上,这就需要账号密码验证,我们刚上传了id_rsa.pub的内容是公钥,私钥在咱们电脑上,这样在提交时就可以通过非对称加密的公钥与私钥来完成账号的验证了,就能检测提交代码者的身份是合法的了。
搭建Hexo静态网站
nodejs安装
Hexo基于nodejs的,下载nodejs:https://nodejs.org/en/download/,安装成功输入命令查看是否安装成功
查看node安装是否成功
Hexo安装
hexo-cli安装
shell
1
npm install -g hexo-cli
创建blog
shell
1
hexo init blog
以上的命令在当前目录下创建了一个blog目录,其中包含了Hexo的相关信息
hexo测试
hexo的基本命令如下:
通过hexo new “test”来创建一篇新的名字叫test的文章
通过hexo g命令generate进行构建,生成静态网页
通过hexo s命令在本地创建一个server服务,默认是localhost:4000
通过hexo d命令deploy部署静态网页到GitHub或其他你想发布的地方
可以通过hexo g和hexo s,然后在浏览器中输入local host:4000检查是否已经可以看到你的网页了
1
2hexo g
hexo s构建时候,如果出现LF will be replaced的警告,可以通过以下的命令解决:
shell
1
git config --global core.autocrlf false
这条命令是禁用自动转换,这个不设置后面上传时会出现警告
测试发布
打开创建blog根目录下的_config.yml配置文件,修改deploy字段
yaml
1
2
3
4deploy:
type: git
repo: https://github.com/aibittek/aibittek.github.io.git
branch: master注意repo填写的是仓库地址,可以进入仓库进行复制粘贴过来,防止写错了部署不成功,branch是版本分支的意思,按照下图中左侧可以查看分支名称,有可能新版本分支是main哦,小心一点
复制仓库地址
安装提交git部署的插件
shell
1 | npm install hexo-deployer-git --save |
输入命令进行部署
shell
1 | hexo clean |
其中clean是清除之前构建的内容,也可以通过一条命令完成以上的步骤
shell
1 | hexo clean && hexo g -d |
部署成功后,会把hexo g构建的静态网页部署到_config.yml,deploy填写的repo仓库中,现在通过网页浏览你的网站吧,通过用户名.github.io来访问哦。
进阶
绑定个性域名
你一定觉得使用github.io域名不够酷,想要一个自己的域名吧🤭
可以通过申请一个域名,把原本访问用户名.github.io改为访问你自己的域名即可,需要域名申请和域名绑定。
域名申请
可以到DNSPod申请一个喜欢的域名,或者任何其他你想要购买域名的地方。
选择DNSPod的原因是之前一直在用DNSPod的DDNS服务,花生咳这个服务用的我已经一口老血都咳出来了。DNSPod目前也是被腾讯收购了,当然阿里云之类的也可以,也是支持DDNS服务的,并提供API接口。点击上面的DNSPod链接,切换到域名一栏点击购买即可。
域名绑定
有两处需要设置,假设上一节你已经选择好了域名,域名叫kui.ge,那么先到你的GitHub上,进入用户名.github.io这个仓库,点击右侧的settings
设置域名绑定
然后往下拉,找到GitHub Pages设置一栏,按照如下的方式填写即可
个性化网页设置
设置成功后,就使用你的新域名进行访问静态网页了。
但是如果我们直接在浏览器输入kui.ge的话,其实也是想访问你的用户名.github.io的,怎么办呢?在域名注册商处DNS解析的地方使用CNAME填写以下内容即可:
CNAME域名绑定
CNAME后面填写的是你的GitHub的用户名.github.io.,注意后面还有个点,@记录后面填写的IP地址,这个地址可以通过ping 你的用户名.github.io
来获得。
最后还要在你的博客目录下,增加一个CNAME文件,内容就写你的域名即可
CNAME域名文件
完成以上的步骤后,在blog目录下,执行以下命令,对新修改的内容进行部署发布
shell
1 | hexo clean && hexo g -d |
发布成功后,使用你自己的域名来访问就可以访问到GitHub Pages里面的静态网页啦,演示如下
个性化域名访问GitHub Pages演示
高效发布文章
Typora图床编辑
网站搭建好之后,是不是就想着发布分享自己的文章内容了呢,那么就要选择一款高效的工具,这里推荐的是Typora Markdown工具,不好意思不是推荐,我想强制你用这个😄。因为实在是太好用了,可以在写的同时渲染出结果,所见即所得,还有很多的优点,这里就不一一介绍啦。
下载地址:https://typora.io/
例子:使用hexo new “name”可以在source/_ports目录下创建出来name.md的Markdown文件,然后双击通过Typora打开进行创作就可以啦。
图床PicGo
咱们在写文章的时候,会用到图片,音乐和视频,你应该不希望这些数据都保存到你的GitHub中吧,否则随着文章的增多内容会增大很多,数据同步的话也变得困难。
一般的像网易云音乐,B站视频等都提供了外部链接,咱们可以把这些媒体资源信息放到对应的音乐视频网站上,减小自己网站的大小,然后通过提供的外部链接放到自己的文章里来就可以了。
图片也一样,可以使用专门提供图片存储地址的服务,这个服务被翻译成图床,英文叫Image Host
有很多软件提供了图床的功能,而PicGo则是提供聚合的图床的工具,我们可以看到支持了很多图床工具的设置
PicGo图床支持
接下来需要做这几步骤:
- Github创建一个新的仓库用来存放图片
- Typora中设置PicGo应用,设置成功后,粘贴图片时会调用PicGo进行自动上传;
- 下载安装PicGo,推荐使用app带界面的更加直观,配置PicGo在接收到数据后上传到哪里,这里我们要设置上传到咱们在GitHub上创建出来的专门放图片的仓库里
- 由于PicGo把图片自动上传到GitHub上需要权限,因此在PicGo中填写GitHub中的token来授权
Github创建仓库就不用说了,Typora中下载PicGo app,然后把下载的应用路径填写进去,再把上面的几个勾勾打上即可,Typora就能在插入图片时自动把图片交给PicGo上传啦。
Typora的偏好设置
打开PicGo设置上传到的地址:
PicGo上传设置
其中repo是你建立的仓库名称,branch是图片上传到哪个分支,token待会从GitHub获取,path是保存到这个分支的哪个目录下,customUrl使用了CDN加速,你自己的可以这么写https://cdn.jsdelivr.net/gh/aibittek/ImageHost,其中aibittek/ImageHost改成你自己的repo即可。
我使用的是githubPlus,上面其实有一个GitHub图床了,单有时候会上传失败,选择githubPlus插件,上传图片错误的概率会小一点,可以在插件设置里搜索githubPlus,然后下载就可以了,然后把以上的这些内容填写到githubPlus这些框框中,最后不要忘记设为默认图床哦。
还差最后一步token获取,登录GitHub->Settings->Developer Settings->Personal access tokens->Generate new token,在Note中取一个名字,然后repo勾上,最后会生成一个token,这个token令牌要注意保存下,只显示一次,并把token存放到PicGo的githubPlus的token一栏点击确定就可以啦。
token获取步骤
设置好之后,在Typora里随便粘贴一张图片会发现正在上传,然后点击GitHub上的图床仓库,看图片是不是已经上传成功了呢。
上传成功验证
这个是上面这张图粘贴到Typora中的时候的自动上传效果
上传过程
美化网站内容
主题选择
可以通过 https://hexo.io/themes 在搜索框中选择自己喜欢的主题,我选择的是这个主题Matery
Matery主题
主题下载地址:https://github.com/blinkfox/hexo-theme-matery
下载之后解压,把hexo-theme-matery目录放到博客的themes目录下即可
matery主题
修改根目录下的_config.yaml配置文件,使得新增加的主题生效
yaml
1 | # Extensions |
通过以下命令构建部署之后,访问网页查看结果是不是已经焕然一新了呢😄
shell
1 | hexo clean && hexo g -d |
主题配置
当然主题还有很多优化设置,比如主页怎么显示,动画怎么展示等等,这些matery已经都提供了修改方法,在源码的Readme文件中的配置一栏,这里就不详述了,可根据自己的需求在文档的配置章节,根据自己的喜好进行自定义修改,传送门:https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
评论系统
以上文档中提到了支持的评论系统,但是没有具体说明如何支持,这里咱们介绍下。
目前不需要服务端的评论系统有两个用的比较多的,一个是valine,一个是Gitalk。
valine使用了LeanCloud访问速度快,无需搭建服务端,也不需要用户登录,就可以随意评论,但是担心不能长久使用,所以我使用了Gitalk,也是基于GitHub的,本质上借助了issue的功能。
既然选择了Gitalk,就开始搭建评论系统的环境吧,需要以下几步:
- GitHub开启授权
- Gitalk网页配置
- GitalkBUG修复
GitHub开启授权
通过Settings->Developer settings->OAuth Apps->New OAuth App创建一个授权,我这里已经创建好了一个叫kui.ge的授权
开启授权操作路径
看下我的授权是怎么写的
授权内容填写
注意,如果你的域名已经转到了自定义域名,这里填写的是你的新域名,如果没有,填写的callback URL应该是你的用户名.github.io
填写好之后,点击确认,会得到Client ID和Client secrets,注意保存Client secrets,只显示一次:
获取Client ID和Client secrets
Gitalk网页配置
打开网站源码的themes/_config.yml配置文件,找到gitalk配置如下:
注意如果不是这个主题,可能没有集成Gitalk,需要按照Gitalk的要求进行配置,源码及文档地址
shell
1 | the Gitalk config,default disabled |
按照以上填写就可以了,多了一个proxy,是为了解决近期的一个BUG的,参考下一章节。
Gitalk BUG修复
最近使用Gitalk的都出现了不能评论的问题,具体原因可参考issue
错误提示:Error: Request failed with status code 403
错误原因:https://mp.weixin.qq.com/s/Lwl9rf95EqlTYLfconjflQ
解决办法:在Gitalk构造时增加CORS proxy,然后在配置中增加这个代理。
刚才在配置中已经增加了proxy的字段了,后面的网址就是CORS proxy,也可以通过cloudflare自己创建一个worker,通过Gitalk提供的请求要求搭建一个,也可以像我一样白嫖人家的😄
注意:Gitalk有安全漏洞,从而导致GitHub获取到全局的读写权限,最差的可能是你的GitHub全站可能会被人删除跑路/(ㄒoㄒ)/~~,具体说明如下:https://www.v2ex.com/t/535608
打开gitalk.ejs代码,增加以下一行即可,完结撒花解决这个BUG了
js
1 | proxy: '<%- theme.gitalk.proxy %>', |
构造增加proxy字段
重新构建部署后,打开网站看看是不是可以评论啦
评论界面
如果不能够登录,需要登录授权后才能登录哦。
另外还可能出现一些其他奇怪的问题,大多的可能性和GitHub开启授权的时候填写的内容错误有关,需要注意callback URL的填写不是仓库的地址,而是github.io的静态网页访问的地址,但是如果你做了自定义域名,就要填写自定义域名的地址了,比如说我的就改成了https://kui.ge
高级
优化访问速度
GitHub国内的访问速度比较慢,另外GitHub也禁止了百度爬虫,导致百度不能收录GitHub内容,这些问题通过这一章节都可以得到解决。
- 1、申请Cloudflare账号,点击右上角的添加站点按钮,输入自己的域名,如下:
Cloudflare添加站点
- 2、到自己的域名服务器上修改DNS为Cloudflare的DNS
不同的域名注册商略有不同,参考如下:
修改域名DNS服务商到cloudflare
- 3、把自己的域名DNS解析转到Cloudflare
域名DNS转到Cloudflare
4、确认激活状态
进入注册Cloudflare的邮箱,查看激活状态。成功激活Cloudflare的邮箱参考如下:
Cloudflare激活提示邮件
5、确定状态激活成功
如下所示,进入看板查看概述,已经激活了。
image-20210222140754636
6、访问自己的网站,访问速度明显加快
以下是参考,打开浏览器的F12调试窗口,设置Disable cache,查看Finish大概3秒钟基本数据加载完毕,之前需要7-8秒钟的时间
网页在不开缓存的情况下加载显示速度
- 7、使用工具查看最终的访问路由是否正确指向了Cloudflare
通过在线路由查询网址,输入自己想查询的域名,看看经过的路由是不是最终到达了Cloudflare。
Cloudflare访问路由验证
其他的一些设置
DNSSEC设置,点击启用后,在域名服务商处填写DS记录,大概10多分钟到1个小时后启动成功。
DNSSEC设置
SSL/TLS的端到端加密
设置端到端的加密访问策略
搜索引擎收录
Google Analytics统计功能
打开Google Analytics链接,登录自己的谷歌账号,按提示添加服务,重要的地方如下,打开高级选项,选择创建Universal Analytics媒体资源,把要统计分析的网址填写上去。
设置媒体资源
得到跟踪ID
获取跟踪ID
增加统计功能
在Hexo的主题配置文件_config.yml中查找googleAnalytics完成跟踪ID的添加,按照以下参考Google Analytics统计功能
yaml
1 | # Add google analytics configuration |
谷歌收录
收录域名提交
登录谷歌搜索排名网址
收录域名提交
获取网站验证码
点击继续后,弹出谷歌网站验证码,点击复制,并把这个值按照图中的要求增加到域名的DNS记录中。
获取网站验证码
登录域名增加TXT解析记录
增加一条TXT记录,name为@,内容为以上谷歌提供的值,我这里kui.ge的域名DNS解析已经转入了Cloudflare,因此在Cloudflare的TXT解析记录如下
TXT解析记录
点击验证,提示验证成功
验证成功界面
前往资源页面进行管理
点击站点地图,把博客根目录下构建生成的sitemap.xml的URL地址填写进去帮忙收录,可以看到谷歌识别到了24个有效访问链接。
站点地图提交
查看收录结果
使用
site:kui.ge
便可以查看收录结果,一般24小时内就能够查阅到结果,使用谷歌这个功能需要科学上网的哦谷歌成功收录结果
Sitemap谷歌收录
安装插件
shell
1
npm install hexo-generator-sitemap --save
修改配置文件
修改根节点_config.xml,添加以下内容:
yaml
1
2sitemap:
path: sitemap.xml
百度收录
提交百度有网页直接提交、手动提交、主动推送,自动推送和sitemap五种方式,各自的优缺点可以看这篇博文。
网页直接提交
在百度搜索框搜索域名,然后点击提交网址,直接提交给百度即可。
网页提交指南
手动提交
登录百度搜索资源平台, 登录成功之后在 用户中心 –> 站点管理 页面中点击添加网站,按提示操作。
添加站点
注意:GitHub禁止了百度爬虫,因此需要确认是否完成了上一章节的Cloudflare设置
HTML标签验证
HTML标签验证
先不要点击验证,找到Hexo主题的head.ejs文件,把上图的代码加入进来,然后hexo clean && hexo g -d
部署成功之后,再点击上面的完成验证。
添加baidu-site-verification
如果使用的是Next主题可以复制百度上图中提供的content值,在Next主题的_config.yml中搜索 baidu_site_verification
填入即可。
主动推送
GitHub禁止百度爬虫访问的补救办法,并能够及时把新创建的文件提交给百度收录,也能保护原创文章,推荐。
- 安装hexo-baidu-url-submit插件
首先,在Hexo根目录下,安装本插件:
undefined
1 | npm install hexo-baidu-url-submit --save |
请注意, 本插件的配置文件中包含秘钥, 请把您的Hexo博客源文件托管到私有仓库里。
- 配置_config.yml文件
同样在根目录下,把以下内容配置到_config.yml
文件中:
yaml
1 | baidu_url_submit: |
your_token可以通过登录百度搜索资源平台,找到自动提交中的主动推送,找到token,填写进入即可。
主动推送token获取
- 检查url
其次,记得查看_config.yml
文件中url的值, 必须包含是百度站长平台注册的域名(一般有www), 比如:
yaml
1 | # URL |
- 加入deploy
yaml
1 | deploy: |
执行hexo d的时候,新的链接就会被推送了。
成功推送的显示结果
成功推送的显示结果
实现原理
推送功能的实现,分为两部分:
新链接的产生,hexo g
会产生一个文本文件,里面包含最新的链接
新链接的提交,hexo d
会从上述文件中读取链接,提交至百度搜索引擎。
自动推送
hexo-theme-matery/_config.yml
默认打开,如下:
yaml
1 | # 百度搜索资源平台提交链接 |
Sitemap百度收录
安装插件
shell
1
npm install hexo-generator-baidu-sitemap --save
修改配置文件
修改根节点_config.xml,添加以下内容:
yaml
1
2baidusitemap:
path: baidusitemap.xml
查看百度收录结果
这是反例,1天了还没收录,还是各种手段都一起上的结果
此时我的心情:
不要管哥的发型
必应收录
收录方法
点击必应收录网址,使用谷歌账号登录,会自动检测谷歌收录服务,点击直接导入即可
必应使用谷歌收录导入
Sitemap网站地图也要提交一遍,如下:
Sitemap提交
提交sitemap.xml网站地图
收录结果
必应收录结果
没有对比就没有伤害,百度我把网页提交、手动提交、自动提交、自动推送、sitemap、robots.txt能加的都加上了,目前还得不到收录,谷歌和必应基本上半天就有结果/(ㄒoㄒ)/~~
SEO优化
修改 url 格式
seo搜索引擎优化认为,网站的最佳结构是用户从首页点击三次就可以到达任何一个页面
但是我们使用hexo编译的站点打开文章的url是:sitename/year/mounth/day/title四层的结构,这样的url结构很不利于seo,爬虫就会经常爬不到我们的文章,修改 hexo 配置文件:
yaml
1 | permalink: :year/:month/:title/ |
nofollow设置
外链越多,搜索引擎给此站点的权重就越低,即排位越后。为了提高权重,可以禁止搜索引擎跟进外链,添加 nofollow 属性就可以做到。
hexo 博客根目录安装插件
shell
1 | npm install hexo-filter-nofollow --save |
编辑 hexo 配置文件,添加:
yaml
1 | nofollow: |
增加robots.txt
在 source 目录下添加 robots.txt ,编写爬虫规则,参考如下
txt
1 | User-agent: * |
收录工具
对于这么多的搜索引擎,使用命令的方式或者分别登录不同平台的搜索引擎进行提交不太方便,有没有聚合的能在一个地方对所有的所有引擎提交收录呢,整理了网页版本和软件版本,有需要的可以学习使用下哦,效率更高。
网页版本
https://www.sousuoyinqingtijiao.com/
image-20210223100423764
站长工具
有了网站免不了要进行维护,查看用户访问数据,以便有针对的满足用户的需求。
不仅可以通过谷歌分析、百度分析等分析引擎,也可以使用站长工具可以比较方便的查看网站被收录,访问数据的信息情况。