美文网首页程序员
Github+Hexo博客体验优化(添加功能)

Github+Hexo博客体验优化(添加功能)

作者: 静水流深ylyang | 来源:发表于2018-12-10 16:58 被阅读0次

    添加分类、标签、关于等页面

    • 以添加分类页面为例:

    站点目录下,打开Git Bash Here,输入

    hexo new page "categories"

    之后在站点目录下的source文件夹下,会新增一个categories的文件夹,里面有一个index.md文件,打开如下

    title: categories
    date: 2015-12-04 15:37:22
    type: "categories"
    comments: false
    ------------------------------
    

    其中,comments可以设置为false,含义是打开分类页面,评论插件不显示;如要显示则改为true

    tags, about页面的创建类似,分别输入

    hexo new page "tags"
    hexo new page "about"

    设置头像

    编辑站点配置文件,添加如下内容

    avatar: url

    其中,url可以是
    (1) 完整的互联网URL,你可以先将设置的头像图片放到网上;
    (2) 本地地址:如/upload/image/avatar.png (你需要将avatar.png文件放在/站点目录/source/upload/image/里面)。

    上传本地图片

    • 打开博客根目录下的配置文件_config.yml,找到post_asset_folder参数,设置为true,之后在每次使用命令$ hexo new "pages"新建文件时,Hexo会自动建立一个与文章同名的文件夹,把与该文章相关的所有资源都放到那个文件夹,就可以方便的使用资源。
    • 在hexo的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image --save(需要等待一段时间)。
    • 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。
    • 把图片放在与pages.md文件同名的文件夹pages下,引用图片时使用格式[图片上传失败...(image-5afd9e-1544432268838)],就可以显示图片了。

    添加社交链接

    • 编辑站点配置文件,添加
    social:
      github: https://github.com/
      twitter: https://twitter.com/
      weibo: http://weibo.com/
      zhihu: http://www.zhihu.com/
      ......
    

    可根据自身需要自行删减。

    添加友情链接

    • 以添加github官网(https://www.github.com)为友情链接为例

    编辑站点配置文件,添加如下内容

    links_title: 友情链接
    links:
      Github: https://www.github.com
    

    其中,links_title为友情链接的名称。

    绑定自己的域名

    • 域名解析
    1. 打开cmd,ing之前github_username.github.io,得到IP地址。

    [图片上传失败...(image-dd8be9-1544432268838)]

    1. 登录腾讯云,控制台->云解析->解析->新手快速添加,添加记录:

    [图片上传失败...(image-617081-1544432268838)]

    • Github操作

    打开创建的github_user.github.io的仓库,选择setting -> GitHub Pages -> Custom domain -> 输入自己的域名 -> save:

    [图片上传失败...(image-b02b1a-1544432268838)]

    到现在,打开浏览器地址栏输入http://yangyuanlin.club已经可以访问到了,但是浏览器提示是不安全的访问,如何通过HTTPS访问自定义域名呢?

    • 通过HTTPS访问自定义域名

    HTTP与HTTPS
    HTTP是明文传输协议,传输内容容易被嗅探和篡改。
    而HTTPS,即HTTP over SSL/TLS,是添加了一层SSL(Secure Sockets Layer,安全套接层),或者是TLS(Transport Layer Security,传输层安全协议),所以HTTPS就可以视为HTTP和SSL/TLS协议的组合。
    HTTPS能做到良好的保密性(防嗅探),真实性(防篡改),完整性(防域名劫持和域名欺骗)。

    SSL证书
    SSL是TLS的前身,但TLS通常也被标志为SSL。
    SSL/TLS协议的基本思路是采用公钥加密法,也就是说,客户端先向服务器端索要公钥,然后用公钥加密信息(会话秘钥),服务器收到密文后,用自己的私钥解密。
    这个公钥就放在数字证书中。只要证书是可信的,公钥就是可信的。

    申请SSL证书
    SSL证书由你的NS(Name Server,域名服务商)颁发,由于腾讯云的SSL证书超级贵,所以我们可以迁移到免费提供SSL的NS处,比如国内的DNSpod(国内都需要备案),还有国外的Netlify和Cloudflare,从速度和操作性考虑,本人选择了Cloudflare。

    1. 到Cloudflare官网注册;
    2. 根据指引点击Add Site,添加自定义域名www.yangyuanlin.club,会自动开始扫描DNS解析记录;
    3. 扫描完成后,Cloudflare会选择给我们分配两个NS地址,将这两个地址替换腾讯云上的原NS地址,等待生效; e721ccd1d0e34d95515e1157e726508e

    [图片上传失败...(image-ff2dce-1544432268838)]

    1. Cloudflare上检查自己网站的状态,显示为Active时表示NS更改成功;

    [图片上传失败...(image-3b6da-1544432268838)]

    1. Cloudflare将自己网站的SSL状态改变为Full状态,等待Status变为Active Certificate,通常生效需要十几分钟。
    2. 再访问自定义域名时,就可以看见是https传输,网址前也有一把绿色小锁,可以看到这个证书其实是Cloudflare的证书。

    [图片上传失败...(image-c76c8e-1544432268838)]

    [图片上传失败...(image-3f668-1544432268838)]

    图床工具(还没用)

    图床就是一个在网络上存储图片的地方,目的是为了节省本地服务器空间,加快图片打开速度。个人用户一般不会使用,主要是个人博客和小网站使用。

    • 七牛云

    另外,这里也有很多:

    https://www.jianshu.com/p/718173c339ee

    添加百度SEO

    • 百度搜索site:www.yangyuanlin.club -> 提交网址,填写ywww.yangyuanlin.club -> 提交。
    • 在<a href="http://zhanzhang.baidu.com/site/index?site=http://www.visugar.com/" target="_blank">百度搜索资源平台</a>中对网站进行验证,文件验证搞不了(html文件总是被重新编译),html标签验证不会,CNAME验证还没搞完。
    • 安装地图生成插件,生成网站地图,Git Bush中执行:

    npm install hexo-generator-sitemap --save # sitemap.xml适合提交给谷歌搜素引擎

    npm install hexo-generator-baidu-sitemap --save # baidusitemap.xml适合提交百度搜索引擎

    然后在站点配置文件_config.yml中添加以下代码(我没加就生成了sitemap)

    # 自动生成sitemap
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml
    

    最后修改站点配置文件_config.yml

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://yangyuanlin.club
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    

    以后每次hexo g后都会在/public目录下生成sitemap.xml和baidusitemap.xml,这就是你的站点地图。

    • 首页标题优化

    SEO最重要的是你的标题,一般搜索都是搜索你的标题。

    更改index.swig文件(HEXO_Blog\themes\next\layout);

    评论系统valine

    • Valine一款快速、简洁且高效的无后端评论系统。

    特性

    • 快速
    • 安全
    • Emoji 😉
    • 无后端实现
    • MarkDown 全语法支持
    • 轻量易用(~15kb gzipped)
    • 文章阅读量统计 v1.2.0+

    开始搭建

    评论内容需要保存到LeanCloud,注册账号并创建应用,注册官网

    image
    应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP IDAPP Key了:
    image

    配置next主题

    修改主题目录下的主题配置文件中的enableAPP_IDAPP_KEY的值为上面刚刚获取到的值即可(其他可以默认)。

    # Valine.
    # You can get your appid and appkey from https://leancloud.cn
    # more info please open https://valine.js.org
    valine:
      enable: true
      appid:  # your leancloud application appid
      appkey:  # your leancloud application appkey
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: ヾノ≧∀≦)o来啊,快活啊! # comment box placeholder
      avatar: mm # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size
    

    未完待续......

    相关文章

      网友评论

        本文标题:Github+Hexo博客体验优化(添加功能)

        本文链接:https://www.haomeiwen.com/subject/mdfdhqtx.html