Preparation
The blog is built based on Hexo and uses the theme Next. To ensure a smooth process, some preparations need to be made first, including the dependencies and accounts that need to be used. The construction environment is Windows.
Dependencies
Node.js
Node.js is an open source, cross-platform JavaScript runtime environment, based on Google’s V8 engine; we cannot do without Node and NPM (Node Package Manager) in the following operations. For installation, please see: Node.js official website , NPM will be installed together with Node.js. After installation, type the following command in the cmd window to verify
node -v npm -v
If the version number appears, the installation is successful.
Git
Git is a distributed open source version control system (VCS), which can be understood as a warehouse, manages project code, and can manage local warehouses and remote warehouses. We mainly use it to push blogs to Github remote warehouses to update personal blog websites. Git official website, the installation of Git is relatively complicated, I recommend an article that explains it in detail: Git detailed installation tutorial.
Related account registration
Github
Speaking of Github, I believe everyone is familiar with it. It is the world’s largest gay dating website and provides a series of free services. Go to Github official website to register an account.
Alibaba Cloud
It is mainly used to customize domain names. If there is no need, you can ignore it. Alibaba Cloud official website, just use Alipay account to register and log in.
LeanCloud
It is used to store comment data. You can ignore it if there is no need. It can also be temporarily placed on the LeanCloud official website and will be registered when the comment system is introduced later.
Blog setup
Local build
Hexo is a blog framework based on Node, which can help us quickly generate static sites. You need to install it first to use it. Enter the following command
npm install hexo-cli -g # g means global, global installation
If it cannot be downloaded for a long time, you can switch the npm source to Taobao mirror.
npm config set registry https://registry.npmmirror.com npm config get registry # Verify whether it is successful
After installation, you can initialize the blog prototype through the hexo init blog storage directory
command
hexo init blog cd ./blog # Enter the directory
The initialized file directory is roughly as follows
|-- blog |-- .gitignore # git ignore files |-- package-lock.json |-- package.json #Project information and configuration |-- _config.landscape.yml # landscape theme configuration |-- _config.yml # Site configuration |-- .github | |-- dependabot.yml |-- scaffolds # Template directory | |-- draft.md # Draft template | |-- page.md # Page template | |-- post.md # Post template |-- source # Resource directory | |-- _posts # Article directory | |-- hello-world.md # Initialize the built-in articles |-- themes # All theme storage directories |-- .gitkeep
Type the commands in turn
hexo new title #Create an article named title in the _posts directory hexo g # g means generate, generate static files hexo s # s means server, start a local server, the default is http://localhost:4000
Visit http://localhost:4000 to see the prototype of the website
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-TRiirVKI-1692548038304) (http://qkc148.bvimg.com/18470/0e2a1a239bc219de.png ‘initialization’) ]
The default theme is landscape. We will change it to Next and uninstall landscape first.
npm un hexo-theme-landscape
install
git clone https://github.com/next-theme/hexo-theme-next themes/next
Note that git is configured with ssh to use the following command
git clone [email protected]:next-theme/hexo-theme-next.git themes/next
At this time, there will be an additional next directory under the themes directory, and then modify the root directory site configuration _config.yml
file
#_config.yml #theme: landscape theme: next
You can see that the theme has changed
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-NmQ17BnQ-1692548038306)(http://qkc148.bvimg.com/18470/9a468b2b731affad.png ‘next topic’ )]
Link Github Pages
Create a new Github warehouse, the warehouse name should be Github username.github.io
, copy the warehouse link (if ssh is configured, the ssh link should be copied), and modify the site configuration
#_config.yml deploy: type: git repo: the link copied in the previous step branch: master
Install the git deploy plugin
npm install hexo-deployer-git --save
type the following command
hexo clean # clear cache hexo g hexo d # d means deploy, deploy to Github
Then visit Github username.github.io
Custom domain name
First of all, you need to have a domain name. I use Alibaba Cloud, so the demonstration is also based on the operation of the official website of Alibaba Cloud. First, log in to Alibaba Cloud, find the domain name resolution, click Add Settings, and add the following
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-g12Lff5t-1692548038308) (http://qkc148.bvimg.com/18470/46026a0a9acbe2ad.png ‘Resolve DNS’ )]
The first record value needs to be replaced with Github username.github.io
, and the second record value can be obtained by entering the following command in the cmd window
ping username.github.io
The third recorded value is Github’s official IP, which may be replaced. You can check it in Github’s official documentation.
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-wIZ3tnk4-1692548038309) (http://qkc148.bvimg.com/18470/fb8d6ba8afa651bf.png ‘Github official document ‘)]
After setting up the parsing, go to the warehouse and set it to your own domain name: Settings -> Pages
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-SBMfY0HW-1692548038311)(http://qkc148.bvimg.com/18470/8b4afa23cced642e.png ‘Set domain name’ )]
Create a new CNAME
file in the source
directory, enter your own domain name (do not include www), save it, and enter the following command again
hexo clean hexo g hexo d
If it is troublesome to execute every time, you can create a new run.bat
file in the root directory of the project and write hexo clean & amp; & amp; hexo g & amp; & amp; hexo d
, just save it. If you need to publish in the future, double-click this file to execute the command automatically. If you want to run it locally, you can replace d
with s
.
Hexo configuration
Website title, keywords, etc.
Site configuration, modify the root directory _config.yml
.
#_config.yml #Site title: yuanyxh - Learning and Precipitation # Site Title subtitle: Apply what you learn #Second-level title of the site description: Read thousands of books and travel thousands of miles # Site description keywords: blog, web, front-end, JavaScript, React, Vue, Node, Java, C/C++, Frida, Xposed # Site keywords author: yuanyxh # author language: zh-CN # language timezone: Asia/Shanghai # time zone
It is recommended to fill in the above content carefully as it will affect SEO
.
Add dark mode
Next supports dark mode by default, but cannot be switched manually. Use drakmode.js to manually add support and theme configuration.
# _config.next.yml vendors: # cdn reference plug-in darkmode_js: https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js darkmode_js: enable: true # Enable plug-in
Add content in /themes/next/layout/_scripts/vendors.njk
# vendors.njk {# Customize darkmode.js - Declaration #} {%- if theme.darkmode_js.enable %} <script src="{<!-- -->{ theme.vendors.darkmode_js }}"></script> {%- endif %} {# Customize darkmode.js - Invokation #} {%- if theme.darkmode_js.enable %} <script> var options = { bottom: '64px', // default: '32px' right: 'unset', // default: '32px' left: '32px', // default: 'unset' time: '0.5s', // default: '0.3s' mixColor: 'transparent', // default: '#fff' backgroundColor: 'transparent', // default: '#fff' buttonColorDark: '#100f2c', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: true, // default: true, label: '', // default: '' autoMatchOsTheme: true // default: true } const darkmode = new Darkmode(options); darkmode. showWidget(); </script> {%- endif %}
At this point, you can manually switch the mode, but the style part still needs to be changed. When switching to the dark mode, drakmode.js
will add darkmode-- in the
class, we create a new body
element activatedthemes/next/source/css/_custom/drakmode.styl
style file and write the following content
# drakmode.styl .darkmode --activated { --body-bg-color: $body-bg-color-dark; --content-bg-color: $content-bg-color-dark; --card-bg-color: $card-bg-color-dark; --text-color: $text-color-dark; --blockquote-color: $blockquote-color-dark; --link-color: $link-color-dark; --link-hover-color: $link-hover-color-dark; --brand-color: $brand-color-dark; --brand-hover-color: $brand-hover-color-dark; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark; --btn-default-bg: $btn-default-bg-dark; --btn-default-color: $btn-default-color-dark; --btn-default-border-color: $btn-default-border-color-dark; --btn-default-hover-bg: $btn-default-hover-bg-dark; --btn-default-hover-color: $btn-default-hover-color-dark; --btn-default-hover-border-color: $btn-default-hover-border-color-dark; --highlight-background: $highlight-background-dark; --highlight-foreground: $highlight-foreground-dark; --highlight-gutter-background: $highlight-gutter-background-dark; --highlight-gutter-foreground: $highlight-gutter-foreground-dark; img { opacity: .75; &:hover { opacity: .9; } } code { color: #69dbdc; background: transparent; } }
Then add a reference in themes/next/source/css/main.styl
# main.styl @import '_custom/darkmode.styl';
Replace Markdown rendering engine
Hexo’s default rendering engine lacks many features. To replace it, first uninstall the default rendering engine.
npm un hexo-renderer-marked --save
Install the hexo-renderer-markdown-it
plugin
npm i hexo-renderer-markdown-it --save
Site configuration additions
#_config.yml markdown: preset: "default" render: html:true xhtmlOut: false langPrefix: "language-" breaks: true linkify: true typographer: true quotes: """''" enable_rules: disable_rules: plugins: - markdown-it-abbr - markdown-it-cjk-breaks - markdown-it-deflist - markdown-it-emoji - markdown-it-footnote -markdown-it-ins -markdown-it-mark -markdown-it-sub -markdown-it-sup - markdown-it-checkbox - markdown-it-imsize -markdown-it-expandable - name: markdown-it-container options: success - name: markdown-it-container options: tips - name: markdown-it-container options: warning - name: markdown-it-container options: danger anchors: level: 2 collisionSuffix: "" permalink: false permalinkClass: "header-anchor" permalinkSide: "left" permalinkSymbol: "?" case: 0 separator: "-"
Install the following plugins
npm i markdown-it-checkbox npm i markdown-it-imsize npm i markdown-it-expandable
Next Configuration
Next provided by default only provides some functions, we can modify the default configuration to expand, create a new _config.next.yml
theme configuration file in the project root directory, the configuration in this file takes precedence over the next theme _config.yml
.
Replace layout
The default layout used by next is Muse. Here I use Mist. #
represents comments. Copy and paste the contents into _config.next.yml
.
#_config.next.yml # Schemes #scheme: Muse scheme: Mist #scheme: Pisces #scheme: Gemini
Menu item
Modifications can be added as needed, and no comments on the displayed menu items are required.
#_config.next.yml menu: home: / || fa fa-home # Home page tags: /tags/ || fa fa-tags # tags categories: /categories/ || fa fa-th # Categories archives: /archives/ || fa fa-archive # Archive schedule: /schedule/ || fa fa-calendar # schedule sitemap: /sitemap.xml || fa fa-sitemap # Sitemap about: /about/ || fa fa-user # About commonweal: /404/ || fa fa-heartbeat # 404 # Enable / Disable menu icons / item badges. menu_settings: icons: true # Whether to display icons badges: false # Whether to display the number of articles in the upper right corner
At this point, when we click the menu item, we will find that all menu items except the home page and archive will lose pages, because we have not created the corresponding page, use hexo new page page name
hexo new page tags # Create a tag page hexo new page categories # Create a category page hexo new page about # Create about page
At this time, source will have several more folders corresponding to it.
Now that there are tags and categories, how do we tag and classify articles? Taking category as an example, we find index.md
under source/categories/
and modify it The content is
# source/categories/index.md --- type: categories title: article classification date: 2022-10-19 13:30:10 ---
You can see that a type field has been added to indicate that this Markdown file is used for classification, so that when our articles want to be classified, we can do this
# source/_posts/Personal blog construction - based on Hexo + Next + Github.md --- title: Personal blog building - based on Hexo + Next + Github categories: - Site construction # Specify the category date: 2022-10-21 09:21:00 description: Build your first blog based on the Hexo framework, with the Next theme, and with the Github Pages free service, so that others can also access your blog! # add article description ---
Add local search
Install the search plugin
npm install hexo-generator-search
Add content to site configuration file
#_config.yml search: path: search.xml # Search path, search.xml is the search file generated by the plug-in by default field: post # Search type content: true # Whether to enable searching for article content template: ./search.xml
Enable local search for topics and add content
# _config.next.yml local_search: enable: true # If auto, trigger search by changing input. # If manual, trigger search by pressing enter key or search button. trigger:auto # Show top n results per article, show all results by setting to -1 top_n_per_article: 1 # Unescape html strings to the readable one. unescape: false # Preload the search data when the page loads. preload: false
Modify website icon
There is no need to add the following configuration. In the theme/next/source/images
directory, copy the icon you want to use and rename it to favicon-16x16-next.png
and favicon-32x32-next.png
favicon: small: /images/favicon-16x16-next.png medium: /images/favicon-32x32-next.png apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /manifest.json
Add copyright
# _config.next.yml creative_commons: license: by-nc-sa #Protocol used # Available values: big | small size: small # size sidebar: false # Whether the sidebar is displayed post: true # Whether the article is displayed language: zh-CN # language
After configuration, it is as follows
[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-WLhV9vKI-1692548038313)(http://qkc148.bvimg.com/18470/e82c64e56b76f575.png ‘Set domain name’ )]
Configure sidebar
# _config.next.yml sidebar: position: right # Sidebar position display: hide # The sidebar is hidden by default padding: 18 offset: 12 avatar: url: /images/Only_Me_Edit.png # Avatar path rounded: true # Whether to display round avatars rotated: false # Whether the mouse is rotated when moved into it site_state: true # Whether to display logs, categories, etc. # Set social links, which can be added and deleted social: GitHub: https://github.com/yuanyxh || fab fa-github QQ: http://wpa.qq.com/msgrd?v=3 & amp;uin=725441272 & amp;site=qq & amp;menu=yes || fa-brands fa-qq Nuggets: https://juejin.cn/user/2881148117060749 || fa-solid fa-layer-group #E-Mail: mailto:[email protected] || fa fa-envelope #Weibo: https://weibo.com/yourname || fab fa-weibo #Google: https://plus.google.com/yourname || fab fa-google #Twitter: https://twitter.com/yourname || fab fa-twitter #FB Page: https://www.facebook.com/yourname || fab fa-facebook #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow #YouTube: https://youtube.com/yourname || fab fa-youtube #instagram: https://instagram.com/yourname || fab fa-instagram #Skype: skype:yourname?call|chat || fab fa-skype social_icons: enable: true # Whether to enable the icon corresponding to the social link icons_only: false # Whether to display only icons transition: false
Display article word count and reading time
Install the hexo-symbols-count-time
plugin
npm install hexo-symbols-count-time
Site configuration
# _config.yml symbols_count_time: symbols: true # Enable word count time: true # Enable reading time estimation total_symbols: true #Total number of characters total_time: true # Total time exclude_codeblock: false # Whether to include code blocks awl: 4 wpm: 275 suffix: "mins."
Theme configuration
# _config.next.yml symbols_count_time: separated_meta: true item_text_total: false
Add timeliness tips to articles
Create a new /scripts/injector.js
file in the root directory and write the following content
//Inject article expiration prompts hexo.extend.injector.register('body_end', `<script src="/js/outdate.js"></script>`,'post')
Create a new /source/js/outdate.js
file and write the content
(function() {<!-- --> // Different dates display different styles, 200 days is a yellow prompt, 400 days is a red prompt, you can define it yourself. let warningDay = 200; let errorDay = 400; // Make sure you can get the time of the article and the details page of the article let times = document. getElementsByTagName('time'); if (times.length === 0) {<!-- --> return; } let posts = document. getElementsByClassName('post-body'); if (posts.length === 0) {<!-- --> return; } // Get the current system time let pubTime = new Date(times[0].dateTime); /* article publishing timestamp */ let now = Date.now() /* current timestamp */ let interval = parseInt(now - pubTime) let days = parseInt(interval / 86400000) /* The publishing time exceeds the specified time (milliseconds) */ //note warning and note danger are the custom template syntax of Next theme. If you use other themes, please change the style yourself to achieve the best display effect. if (interval > warningDay*3600*24*1000 & amp; & amp; interval < errorDay*3600*24*1000){<!-- --> posts[0].innerHTML = '<div class="note warning">' + '<h5>Article timeliness tips</h5><p>This is an article published ' + days + ' days ago, some information may have changed, please pay attention to screening.</p>' + '</div>' + posts[0].innerHTML; }else if(interval >= errorDay*3600*24*1000){<!-- --> posts[0].innerHTML = '<div class="note danger">' + '<h5>Article timeliness tips</h5><p>This is an article published ' + days + ' days ago, some information may have changed, please pay attention to screening.</p>' + '</div>' + posts[0].innerHTML; } })();
If the article is more than 200 days old, an outdated prompt will be displayed.
Add copy function to code block
Theme configuration added
# _config.next.yml codeblock: copy_button: enable: true # Available values: default | flat | mac style: mac
Add comment system
Hexo blog advanced: add Waline comment system to Next theme
Waline official documentation
::: warning
Note
According to the official description of LeanCloud, the current international version no longer supports domestic access. For details, the shared domain name of the LeanCloud international version no longer provides services to mainland China.
:::
This means that domestic networks cannot obtain and publish comment data. This site may replace the comment system in the future. If you need other comment systems, please see the Next Document – Comment System
Website SEO optimization
SEO, that is, search engine optimization. The SEO optimization here mainly focuses on the size of the project and accelerating the loading time of the first screen of the site. In fact, it also depends on whether the site content is high-quality, the number of effective user visits, etc.
Compressed code
Install plugin
npm install hexo-neat --save
Site configuration added
# _config.yml # Turn on compression neat_enable: true neat_html: enable: true exclude: neat_css: enable: true exclude: - '**/*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/index.js'
site included
How to get my site indexed by search engines
Next SEO
Website performance test
A good website must have good performance. If users have to wait for a long time to access your website, or the website page is stuck, user satisfaction will be reduced and a large number of users will be lost. Here we recommend a performance testing website specifically for Test website performance and generate statistical reports
PageSpeed Insights
Reference article
Detailed tutorial on building a personal website with GitHub + Hexo
Use of hexo blog site sitemap
Hexo Next theme advanced settings
Hexo Next 8.x theme adds toggleable dark mode
The optimization of the GitHub blog built by Hexo
Hexo chooses a more advanced Markdown renderer
Hexo-NexT loading performance optimization
Hexo blog advanced: Add article expiration/timeliness reminder for Hexo blog content of Next theme
Hexo + Next + Pages Personal Blog – SEO Optimization
Hexo Blog Advancement: Add Waline Comment System to Next Theme
9: Add article expiration – timeliness reminder/ to the -Next-theme’s -Hexo-blog content
9: https://www.linjiexin.com/post/blog-seo/
10: https://theme-next.js.org/docs/theme-settings/seo.html
11: https://qianfanguojin.top/2022/01/20/Hexo blog advancement: add-Waline-comment system for-Next-theme/
PageSpeed Insights: https://pagespeed.web.dev/?utm_source=psi & amp;utm_medium=redirect
Waline: https://waline.js.org/guide/get-started.html
LeanCloud CN: https://forum.leancloud.cn/t/2022-8/25408
Next Comments: https://theme-next.js.org/docs/third-party-services/comments