Article

Teach you 10 minutes to build a cool personal blog

Take personal blogs for example, Blog address Preparation install $ npm install -g hexo-cli Initialization $ hexo init <folder> $ cd <folder&...

Take personal blogs for example, Blog address

Preparation

install

$ npm install -g hexo-cli

Initialization

$ hexo init <folder> $ cd <folder> $ npm install

Create a new article

$ hexo new "My New Post"

Operational development environment

$ hexo server $ hexo s

structure

$ hexo generate $ hexo g

deploy

$ hexo deploy $ hexo d

Detailed preparations can be found hexo official website

Installation theme cactus , a very programmer's topic, recommended!

Clone the warehouse and copy the source file to the themes directory in the blog project

git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

For details, please refer to the official documents

# url of home Projects projects_url: https://github.com/xiaobinwu # Set page direction direction: ltr # Home navigation # $hexo new page about, you can create a page page nav: home: / about: /about/ articles: /archives/ categories: /categories/ search: /search/ # Social links social_links: github: https://github.com/xiaobinwu mail: mailto:[email protected] # Open label shortcut tags_overview: true # Display number of Writing on the first page posts_overview: show_all_posts: false post_count: 5 sort_updated: false # Arrangement mode archive: sort_updated: false post: show_updated: false # logo settings logo: enabled: true width: 50 height: 50 url: /images/logo.png gravatar: false # ico settings favicon: desktop: url: /images/favicon.ico gravatar: false android: url: /images/favicon-192x192.png gravatar: false apple: url: /images/apple-touch-icon.png gravatar: false # Highlight syntax highlight: kimbie.dark # Blog theme color, dark, light, classic, white colorscheme: dark page_width: 48 # rss settings rss: atom.xml open_graph: fb_app_id: fb_admins: twitter_id: google_plus: # disqus comment, not enabled by default, requires FQ disqus: enabled: false shortname: cactus-1 # Google statistics google_analytics: enabled: false id: UA-86660611-1 # Baidu statistics baidu_analytics: enabled: false id: 2e6da3c375c8a87f5b664cea6d4cb29c gravatar: email: [email protected] valine: enable: true app_id: xxxxxx app_key: xxxxxxx

Valine review system

themes/cactus/_config.yml to configure Valine, you need to apply for app_id, app_key

valine: enable: true app_id: xxxx app_key: xxxx

Themes / cactus / layout /. Partial / comments.ejs, write

<% if(theme.valine.enable) { %> <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> <script src='//unpkg.com/valine/dist/Valine.min.js'></script> <div id="vcomments"></div> <script> new Valine({ el: '#vcomments', visitor: true, appId: '<%=theme.valine.app_id %>', appKey: '<%=theme.valine.app_key %>', placeholder: 'ヾﾉ≧∀≦)o Come on, have fun!', avatar: 'robohash' }) </script> <% } %>

Automatically deploy hexo blog to Alibaba cloud server

Create a warehouse (remote server creates git warehouse). You can use ssh to log in to the ECS

mkdir blog.git && cd blog.git git init --bare

Hexo configuration

deploy: type: git message: update repo: [email protected]:/www/wwwroot/blog.git,master

Plug-in installation

npm install hexo-deployer-git --save

Automatic deployment

Enter the hooks directory of git warehouse and create the hook post receive

cd /www/wwwroot/blog.git/hooks touch post-receive vim post-receive

Enter the following script:

#!/bin/bash -l GIT_REPO=/www/wwwroot/blog.git TMP_GIT_CLONE=/www/wwwroot/tmp/blog PUBLIC_WWW=/www/wwwroot/blog rm -rf $ mkdir $ git clone $GIT_REPO $TMP_GIT_CLONE rm -rf $/* cp -rf $/* $

change permission

chmod +x post-receive chmod 777 -R /www/wwwroot/blog chmod 777 -R /www/wwwroot/tmp/blog

Final deployment

$ hexo g -d