Foreword:
In the last article, we introduced the establishment of a personal blog. Considering that the length of the article is not conducive to reading, the last article only completed the establishment of a local blog. This article will introduce how to synchronize local blogs to github and bind your own domain name. It will also involve some basic configuration, theme modification, and access to some third-party tools.
Prepare:
First, you need to register a Github account. I won’t say much about the registration process here. Then create a Repository and name it: your Github’s name.github.io. The name here is very important and cannot be taken randomly. It must be strictly in accordance with the requirements.
After creating Github's Repository, we open the cmd command tool and ping your Github's name.github.io, so that we can get the corresponding IP address. Register a domain name of your own. Here I registered and purchased the domain name on Alibaba Cloud. It is named after myself. The ending is preferred to use .com or .cn. If it is registered, I will use another one, depending on personal preference. Then configure domain name resolution in the Alibaba Cloud console to the IP address we just pinged.
Open the Alibaba Cloud domain name resolution list, as shown in the figure below:
Click the corresponding "Analysis Settings" button behind the domain name that needs to be analyzed to enter the analysis page, click the Add Analysis button to add the corresponding data, as shown in the figure:
At this point, we have bound the domain name to our Repository, and then we only need to synchronize the local blog to the Repository to access it through the domain name.
Sync to Github:
Find the previously created site directory, use the git command to clone the newly created warehouse to the local, command:
git clone https://github.com/你的github名字/你的github名字.github.io .deploy/你的github名字.github.iohexo generate
xcopy public /s .deploy/你的github名字.github.io
cd .deploy/你的github名字.github.io
git add .
git commit -m "update"
git push origin masterSite theme configuration:
Everyone has a love of beauty, so let's introduce how to modify our blog to be cooler. We mainly use the NEXT template here. About NEXT, you can click to open the link to learn more.
In the site directory, execute the git command to load the next template code to the local.
git clone https://github.com/iissnan/hexo-theme-next themes/nextSite configuration:
Find the _config.yml file in the site directory, open it (it is recommended to use MarkdownPad as the editing tool MarkdownPad here ), and set the title, author, language, etc. of the site.
# Site
title: Hexo博客
subtitle: 新的开始
description: blog.fens.me
author: bsspirit
email: [email protected]
language: zh-HansIf you set Chinese, you need to set the language to zh-Hans. For the specific language list, please refer to the NEXT topic on the official website . Some people found that the Chinese language was set, and the Chinese characters filled in were garbled characters. This is because the file encoding format is incorrect. Save the file as UTF-8 format and overwrite the original one.
Theme configuration:
Find the _config.yml theme configuration file under the next directory under the themes directory under the HEXO site directory, find and modify the scheme attribute, and choose the appearance you like. Here I choose the Mist theme.
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
Find the avatar configuration in the theme configuration file , here is to set the avatar, just configure the avatar address.
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /uploads/head.jpg
In the theme configuration file, find the menu settings, select the desired menu and release it:
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
Originally, there were two tags, home page and archive, by default. Here I released two tags, category and about, and needed to create corresponding index pages.
Category page: Execute commands in the site directory
hexo new page categorieshexo new page about
Configuration at the bottom of the site:
Find the footer.swig file under \themes\next\layout\_partials, find {% if theme.footer.powered %}, {% if theme.footer.powered and theme.footer.theme.enable %}, {% if The content under theme.footer.theme.enable %} can adjust the display text format at the bottom. Find the footer keyword in zh-Hans.yml under the \themes\next\languages folder to modify the display content .
footer:
powered: "怠惰是贫穷的制造厂"
theme: Never say die.Social link configuration:
Find the social configuration in the theme configuration file , and select the site configuration link you need.
Third-party function access:
Comment system:
The gitment comments used here, click on the link to register with gitment , fill in your own website link in the Authorization callback URL, and write down the Client ID and Client Secret. Find the Gitment configuration in the theme configuration file
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 enabledAdd to en.yml in the languages directory:
gitmentbutton: Show comments from Gitmentgitmentbutton: 显示 Gitment 评论{% elseif theme.valine.appid and theme.valine.appkey %}
<div id="vcomments"></div>{% 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 %}{% 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 %}Then introduce the gitment.swig file in the layout/_third-party/comments/index.swig file under the theme:
{% include 'gitment.swig' %}#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;
}@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>
<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主题、评论、阅读量统计和站内搜索