Using the lnmp installation one-click package from lnmp.org, just follow the program to install it and conveniently create a virtual host without needing to rewrite or set up a database.
This article uses lvcshu.com as the example domain
Install HEXO#
Follow the official instructions step by step to install
Install node.js#
curl:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
or
wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
Then restart the terminal or reconnect via ssh
nvm install stable
Install hexo-cli#
npm install -g hexo-cli
It will be installed quickly!
Deploy Blog#
After installing Hexo, run the following command to initialize Hexo in the target.
Here, the folder is the main directory of our blog, which is the directory of the lnmp virtual host. After entering the directory, execute
hexo init .
npm install
hexo g
At this point, the static pages of our blog have been successfully generated, but they cannot be accessed yet, so let's move on to the next step.
Adjust nginx Configuration File#
Open the configuration file of the corresponding site in nginx, find
root /home/wwwroot/lvcshu.com;
Change it to
root /home/wwwroot/blog.lvcshu.com/public;
Remember: There are two places to change, corresponding to http and https
Recommendation: You can redirect http to https using a 301 redirect
lnmp nginx restart
Let's see the effect!
Change Theme#
There are many beautiful open-source Hexo themes available online, and the default theme is really ugly. I found a minimalist yet very beautiful theme called "NexT".
Install NexT Theme#
Enter the main directory of the blog
git clone https://github.com/theme-next/hexo-theme-next themes/next
Then go to the site configuration file ('_config.yml' in the blog main directory) and change the theme field to next, then execute hexo clean && hexo g, and open the website to see the effect.
NexT Theme Optimization#
The following content is from Hexo+Next Theme Optimization. It is recommended to visit and like!
Set Theme Style#
Open the themes/next/_config.yml file, search for the scheme keyword, and remove the # in front of the scheme you want to enable.
\# ---------------------------------------------------------------
\# Scheme Settings
\# ---------------------------------------------------------------
\# Schemes
#scheme: Muse # Default Scheme, this is the original version of NexT, black and white tone, a lot of white space
#scheme: Mist # A compact version of Muse, a clean and orderly single-column appearance
scheme: Pisces # Dual-column Scheme, fresh like a little girl
#scheme: Gemini # Similar to Pisces
Set Display Text and Icons for Menu Items#
NexT uses icons provided by Font Awesome. Font Awesome offers over 600 icons, which can meet the vast majority of scenarios, and there is no need to worry about icons being blurry on Retina screens.
Set Display Chinese Text for Menu Items:#
Open the themes/next/languages/zh-Hans.yml file, search for the menu keyword, and modify the corresponding Chinese text or add new ones.
menu:
home: Home
archives: Archives
categories: Categories
tags: Tags
about: About
search: Search
schedule: Schedule
sitemap: Sitemap
commonweal: Public Welfare 404
# Add new menu
catalogue: Catalogue
Set File Directory and Corresponding Icons for Menu Items (New Version Merged Two Items)#
Open the themes/next/_config.yml file, search for the menu_icons keyword, modify the corresponding icon names or add the corresponding icons for menu.
\# ---------------------------------------------------------------
\# Menu Settings
\# ---------------------------------------------------------------
\# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
\# Usage: \`Key: /link/ || icon\`
\# Key is the name of the menu item. If the translation for this menu is found in languages - this translation will be loaded; if not - the Key name will be used. Key is case-sensitive.
\# Value before `||` delimiter is the target link.
\# Value after `||` delimiter is the name of the FontAwesome icon. If the icon (with or without delimiter) is not specified, a question icon will be loaded.
menu:
home: / || home
archives: /archives/ || history
categories: /categories/ || list
tags: /tags/ || tags
tools: /categories/tools-resources/ || briefcase
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
\# Enable/Disable menu icons.
\# Icon Mapping:
\# Map a menu item to a specific FontAwesome icon name.
\# Key is the name of the menu item and value is the name of the FontAwesome icon. Key is case-sensitive.
\# When a question mask icon appears, it means that the item has no mapping icon.
menu_icons:
enable: true
Except for home, archives, all others need to manually create this page.
Create Corresponding File Directory for Menu Items#
Taking categories as an example, in the terminal window, navigate to the Hexo site directory. Use hexo new page to create a new page named categories:
cd your-hexo-site
hexo new page categories
Edit the newly created page, set the category
\-\-\-
title: Categories
date: 2014-12-22 12:39:04
categories: Testing # Category Name
type: "categories"
\-\-\-
Avatar Settings#
Add Avatar#
Open the themes/next/_config.yml file, search for the Sidebar Avatar keyword, and remove the # in front of avatar:
\# Sidebar Avatar
\# in theme directory(source/images): /images/avatar.jpg
\# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png
Or use a local image, place the image in themes/next/source/images, and modify avatar:
avatar: /images/avatar.gif
Set Avatar Border to Circular Frame#
Open the file located at themes/next/source/css/_common/components/sidebar/sidebar-author.syl, modify as follows:
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
// Modify avatar border
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
Effect: Rotate Avatar on Mouse Hover#
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
// Modify avatar border
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
// Set rotation
transition: 1.4s all;
}
// Rotatable circular avatar, `hover` action
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}
Show Current Browsing Progress on Page#
Open themes/next/_config.yml, search for the keyword scrollpercent, change false to true.
Place Top Button in Sidebar#
If you want to place the top button in the sidebar, open themes/next/_config.yml, search for the keyword b2t, and change false to true.
\# Back to top in sidebar
b2t: true
\# Scroll percent label in b2t button
scrollpercent: true
Sidebar Settings#
Set Social Links in Sidebar#
Open the themes/next/_config.yml file, search for the keyword social, and then add the social site names and addresses.
\# ---------------------------------------------------------------
\# Sidebar Settings
\# ---------------------------------------------------------------
\# Social Links.
\# Usage: \`Key: permalink || icon\`
\# Key is the link label showing to end users.
\# Value before `||` delimiter is the target permalink.
\# Value after `||` delimiter is the name of the FontAwesome icon. If the icon (with or without delimiter) is not specified, a globe icon will be loaded.
social:
E-Mail: mailto:[email protected] || envelope
Google: https://plus.google.com/yourname || google
Twitter: https://twitter.com/yourname || twitter
FB Page: https://www.facebook.com/yourname || facebook
# etc.
Set Social Icons in Sidebar#
Open the themes/next/_config.yml file, search for the keyword social_icons, and add the social site names (pay attention to case) icons, Font Awesome icons.
RSS#
In your Hexo site directory:
npm install hexo-generator-feed --save
Open the _config.yml in the Hexo site, and add the following configuration:
\# feed
\# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
Friendly Links#
Open the themes/next/_config.yml file, search for the keyword Blog rolls:
\# Blog rolls
links_title: Friendly Links # Title
links_layout: block # Layout, one link per line
#links_layout: inline
links: # Links
baidu: http://example.com/
google: http://example.com/
Add Shadow Effect to Homepage Articles#
Open themes/next/source/css/_custom/custom.styl, add the following code:
// Add shadow effect to homepage articles
.post {
margin-top: 0px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
Modify Article Separator Line#
Open themes/next/source/css/_common/components/post/post-eof.styl, modify:
.posts-expand {
.post-eof {
display: block;
// margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 0%; // Separator line length
height: 0px; // Separator line height
background: $grey-light;
text-align: center;
}
}
Custom Styles for Code Blocks#
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// Custom border styles
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
Enable Copyright Statement#
In the theme configuration file, search for the keyword post_copyright, change enable to true:
\# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
Custom copyright statement at the bottom of the article
Author: Dragonstyle
Link: http://www.dragonstyle.win/2017/09/06/Android-Studio-personal-settings/
Source: JianShu
Copyright Statement: All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated. Please indicate the source when reprinting!
In the directory themes/next/layout/_macro/, add my-copyright.swig, with the following content:
{% if page.copyright %}
<div class="my\_post\_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS library sweetalert can modify the path -->
<!--
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">-->
<p><span>Article Title:</span>{{ page.title }}</a></p>
<p><span>Article Author:</span>{{ theme.author }}</a></p>
<p><span>Publication Time:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>Last Updated:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>Original Link:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="Click to copy article link"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="Copy successful!"></i></span>
</p>
<p><span>License Agreement:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">Attribution-NonCommercial-NoDerivatives 4.0 International</a> Please retain the original link and author when reprinting.</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: 'Copy successful',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
In the directory themes/next/source/css/_common/components/post/, add my-post-copyright.styl, with the following content:
.my\_post\_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my\_post\_copyright p{margin:0;}
.my\_post\_copyright span {
display: inline-block;
width: 5.2em;
color: #333333; // title color
font-weight: bold;
}
.my\_post\_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my\_post\_copyright a {
color: #808080;
border-bottom:0;
}
.my\_post\_copyright a:hover {
color: #0593d3; // link color
text-decoration: underline;
}
.my\_post\_copyright:hover .fa-clipboard {
color: #000;
}
.my\_post\_copyright .post-url:hover {
font-weight: normal;
}
.my\_post\_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my\_post\_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
Modify themes/next/layout/_macro/post.swig, add the following code:
{% if theme.wechat\_subscriber.enabled and not is\_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}
Before this, add the following code:
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
Modify themes/next/source/css/_common/components/post/post.styl file, add the following code at the last line:
@import "my-post-copyright"
Set new articles to automatically enable copyright, that is, new articles automatically display the custom copyright statement, set in your site/scaffolds/post.md file
---
title: {{ title }}
date: {{ date }}
tags:
type: "categories"
categories:
copyright: true # New, enable
---