HEXO个人博客实现域名访问

前言:

       上一篇我们介绍了个人博客的搭建,考虑到篇幅太长不利于阅读,所以上一篇只完成了本地博客的搭建。本文将会介绍如何将本地博客同步到github以及绑定自己的域名,还会涉及一些基础配置、主题的修改、以及接入第三方的一些工具。


准备:

       首先需要注册一个Github的账号,注册过程这里不多说,然后创建一个Repository,并且命名:你的Github的名字.github.io ,这里名字很重要不能乱取,要严格按照要求来。

       创建好Github的Repository之后,我们打开cmd命令工具,ping 你的Github的名字.github.io,这样我们就可以得到对应的IP地址。注册一个自己的域名,这里我是在阿里云上注册购买的域名,以自己名字命名的,结尾优先使用.com或者.cn,如果被注册了再使用其他的,看个人喜好吧。然后在阿里云控制台里面配置域名解析到我们刚刚ping出的IP地址。

       打开阿里云域名解析列表,如下图:

点击需要解析的域名后面对应的“解析设置”按钮,进入解析页面,点击添加解析按钮,添加对应的数据,如图:

到这里,我们就将域名和我们的Repository绑定了,接下来只需要将本地博客同步到Repository就可以通过域名访问了。

同步到Github:

找到之前创建的站点目录下,用git命令clone之前新建的仓库到本地,命令:

git clone https://github.com/你的github名字/你的github名字.github.io .deploy/你的github名字.github.io
然后在HEXO站点目录下创建一个deploy.txt文档,写入命令:

hexo generate
xcopy  public /s .deploy/你的github名字.github.io
cd .deploy/你的github名字.github.io
git add .
git commit -m "update"
git push origin master
然后将扩展名改为sh,就变成一个同步代码的脚本deploy.sh。双击这个文件,然后按要求输入Github的用户名和密码就可以了(这是windows下的命令,linux下自己稍作修改)。然后我们直接输入域名就可以访问我们的博客了。

站点主题配置:

爱美之心人皆有之,下面我们将介绍一下如何将我们的博客修改得更酷一点。我们这里主要使用的是NEXT模板关于NEXT可以到点击打开链接了解更多。

在站点目录下,执行git命令,加载next模板代码到本地。

	git clone https://github.com/iissnan/hexo-theme-next themes/next

站点配置:

找到站点目录下的_config.yml文件,打开(这里推荐使用MarkdownPad作为编辑工具MarkdownPad),设置站点的标题、作者、语言等。

# Site
title: Hexo博客    
subtitle: 新的开始
description: blog.fens.me
author: bsspirit
email: [email protected]
language: zh-Hans

设置了中文需要将language设置成zh-Hans,具体语言表请看官网NEXT主题。有的发现设置了中文language,填写的中文是乱码,这是文件编码格式不对,将文件另存为UTF-8格式,覆盖原来的,就可以了。


主题配置:

找到HEXO站点目录下的themes目录下next目录下的_config.yml主题配置文件,找到并修改修改scheme属性,选择自己喜欢的外观,这里我选择Mist主题。

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini



在主题配置文件里面找到avatar配置,这里是设置头像的,配置好头像地址就好了。

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /uploads/head.jpg


在主题配置文件里面,找到menu设置,选择需要的menu放出来:

menu:
  home: / || home
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  about: /about/ || user

# Enable/Disable menu icons.
menu_icons:
  enable: true


原来默认有首页和归档两个标签,这里我放出了分类和关于两个标签,需要创建对应的index页面。

分类页面:在站点目录下执行命令

hexo new page categories
关于页面:在站点目录下执行命令
hexo new page about


站点底部配置:

找到\themes\next\layout\_partials下的footer.swig文件,找到{% if theme.footer.powered %}、{% if theme.footer.powered and theme.footer.theme.enable %}、{% if theme.footer.theme.enable %}下的内容,可以对底部展示文字格式做调整,在\themes\next\languages文件夹下的zh-Hans.yml中找到footer关键字,可以对展示内容做修改。

footer:
  powered: "怠惰是贫穷的制造厂"
  theme: Never say die.

社交链接配置:

在主题配置文件中找到social配置,选择自己需要的站点配置链接。



第三方功能接入:


评论系统:

这里使用的gitment评论,点开链接gitment注册,  Authorization callback URL填写自己的网站链接,记下Client ID和Client Secret。在主题配置文件中找到Gitment配置

gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: true # Hide 'Powered by ...' on footer, and more
  language: zh-Hans # Force language, or auto switch by theme
  github_user: # MUST HAVE, Your Github ID
  github_repo: # MUST HAVE, The repo you use to store Gitment comments
  client_id: # MUST HAVE, Github client id for the Gitment
  client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
对应的都填上就好了。
在languages目录下en.yml中添加:

gitmentbutton: Show comments from Gitment
在zh-Hans.yml里面添加:

gitmentbutton: 显示 Gitment 评论
在layout/_partials/comments.swig中找到

{% elseif theme.valine.appid and theme.valine.appkey %}
      <div id="vcomments"></div>
在下面再加一个elseif分支

{% elseif theme.gitment.enable %}
       {% if theme.gitment.lazy %}
         <div οnclick="ShowGitment()" id="gitment-display-button">{
   
   {  __('gitmentbutton') }}</div>
         <div id="gitment-container" style="display:none"></div>
       {% else %}
         <div id="gitment-container"></div>
       {% endif %}
在layout/_third-party/comments/目录下中添加文件gitment.swig

{% if theme.gitment.enable %}
   {% set owner = theme.gitment.githubID %}
   {% set repo = theme.gitment.repo %}
   {% set cid = theme.gitment.ClientID %}
   {% set cs = theme.gitment.ClientSecret %}
   <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
   <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
   {% if not theme.gitment.lazy %}
       <script type="text/javascript">
           var gitment = new Gitment({
               id: window.location.pathname, 
               owner: '{
   
   {owner}}',
               repo: '{
   
   {repo}}',
               oauth: {
                   client_id: '{
   
   {cid}}',
                   client_secret: '{
   
   {cs}}',
               }});
           gitment.render('gitment-container');
       </script>
   {% else %}
       <script type="text/javascript">
           function ShowGitment(){
               document.getElementById("gitment-display-button").style.display = "none";
               document.getElementById("gitment-container").style.display = "block";
               var gitment = new Gitment({
                   id: document.location.href, 
                   owner: '{
   
   {owner}}',
                   repo: '{
   
   {repo}}',
                   oauth: {
                       client_id: '{
   
   {cid}}',
                       client_secret: '{
   
   {cs}}',
                   }});
               gitment.render('gitment-container');
           }
       </script>
   {% endif %}
{% endif %}

然后在主题下layout/_third-party/comments/index.swig文件中引入gitment.swig文件:
{% include 'gitment.swig' %}
在source/css/_common/components/third-party/目录下添加gitment.styl文件,设置button的样式:
#gitment-display-button{
     display: inline-block;
     padding: 0 15px;
     color: #0a9caf;
     cursor: pointer;
     font-size: 14px;
     border: 1px solid #0a9caf;
     border-radius: 4px;
 }
 #gitment-display-button:hover{
     color: #fff;
     background: #0a9caf;
 }
在source/css/_common/components/third-party/third-party.styl文件中引入相应的CSS样式即可:
@import "gitment";
这样就可以了。

文末添加结束语:

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
            -------------本文结束
            <i class="fa fa-paw"></i>
            感谢您的阅读-------------
        </div>
    {% endif %}
</div>
接着打开\themes\next\layout_macro\post.swig文件,在post-body 之后, post-footer之前添加如下画红色部分代码(post-footer之前两个DIV):如下大概在360行左右的位置:

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
最后在主题配置文件末尾添加:

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true


底部显示访问量:

打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这话:


script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
然后再合适的位置添加显示统计的代码(位置还是上述这个文件),如图:

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
到这里就结束了。


添加百度统计,阅读次数都可以在官网看到点击打开链接,这里不多说了。



本文在参考一些技术文章的基础上实践过,整理了相关流程,感谢相关分享的作者,这里附链接:

hexo next主题集成gitment评论系统

Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索

hexo之next主题个性化配置详细教程

搭建个人博客



同步个人博客地址: http://liujibin.cn/

猜你喜欢

转载自blog.csdn.net/liujibin1836591303/article/details/78653547
今日推荐