• GitHubPages + Hexo: Free, easy to use and widely used

Blog set up

  1. Create the GitHub repository

  • Note that Respository name must be entered:Your username.github. IODo not make any other changes, just click the “Create Repository” button to Create the repository
  1. Install the framework you need for your blog
  • Install Homebrew

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  • Command to check whether Homebrew is successfully installed

$ brew -v

  • Install git

$ brew install git

  • Command to check whether Git is successfully installed

$ git --version

  • Installation node. Js

$ brew install node

  • Command to check whether the Node is successfully installed

$ node -v

  • Install hexo

$ npm install -g hexo

  • Command to check whether hexo was successfully installed

$hexo -v 3. Install blog-related plug-ins

  • Plug-ins that automatically deploy to Github

$ npm install hexo-deployer-git --save

  • Install atom generation plugin to make it easy for interested friends to subscribe (RSS subscription)

$NPM install hexo-generator-feed –save then add the following configuration to the _config.yml file in the local Blog root directory

# Extensions ## Plugins: http://hexo.io/plugins/ #RSS plugin: -hexo-generator-feed # feed Atom feed: type: Atom path: atom.xml limit: 20Copy the code

In the _config.yml directory in the topic directory, add the following configuration RSS: /atom.xml

  • Install the blog home page generator plug-in

$ npm install hexo-generator-index --save

  • Install the tag generation plug-in

$NPM install hexo-generator-tag –save Create a blog, debug, publish

  • Create a local directory for creating blogs

$hexo init Blog after successful execution, a folder named Blog is created

  • Write blog content

$hexo new firstBlog will create a new firstblog.md file in Blog/source/_posts, and then you can edit your Blog content. The Visual Studio Code editor supports previewing and syncing with Evernote

  • Local debugging

$sudo hexo Server or $sudo hexo s can then visit http://localhost:4000 to see the results

  • Installing the release plug-in

In the blog folder run the following command $NPM install hexo-deployer-git –save and in the _config.yml file change the published configuration to the last line (note to replace yourusername)

Author: blog author language: zh-Hans theme: next // Install the theme name deploy: Type: git / / release use git repo: https://github.com/yourusername/yourusername.github.com.git / / your own making branch warehouse address: masterCopy the code
  • Run build publish
$ sudo hexo g
$ sudo hexo d
Copy the code
  • If you change the source code of your site, do so before publishing it

$ sudo hexo clean

  • If it works, you can passyourusername.github.comoryourusername.github.ioTo visit your blog
  1. Configure blog category content
  • Added the page for classifying resources
Hexo new page about the INFO Created: ~ / blog/source/about/index. The md / / open the changed to - the title as follows: the about the date: Comment: false // Add this line close the comment -- here is something about meCopy the code
  • The newly added menu needs to be translated into Chinese

Open the \themes\next\languages folder and create a corresponding file for the host configuration language, such as zh-hans.yml 6. Custom blog

  • Replace the topic

If you are not satisfied with the default theme, you can clone someone else’s theme into the project “/ Themes “path. Meow god’s theme is here, Hexo also has more themes. Such as the use of a set of git clone https://github.com/iissnan/hexo-theme-next.git themes/next and then under the blog/themes folder, will see a next folder, There is a _config.yml file in next, which is the theme configuration file. To set the theme for your Blog, go back to the _config.yml file in the root directory (under the Blog folder), change the theme property from landscape to Next, and make sure there are Spaces between the configured keys. More Settings are modified and saved before we run the command

$ hexo g
$ hexo d
Copy the code

After executing, you can see the blog’s new theme locally or on Git. For more topics, please refer to Zhihu

  • Set the number of page views

Open themes/ your theme /layout/_partial/footer.ejs to add

# < script script async SRC = "/ / busuanzi. Ibruce. Info/busuanzi / 2.3 / busuanzi. Pure. The mini. Js" > < / script > # tag # pv way, a single user click n article in a row, <span id="busuanzi_value_site_pv"></span> Number of times </span> Number of visitors < SPAN ID ="busuanzi_container_site_uv"> Number of total Visitors <span ID ="busuanzi_value_site_uv"></ SPAN > Person </span>Copy the code

  • The comment function

Add page_comment: true in the themes\random\layout\_partial folder and create a livere.ejs file and add the following code

<section class="livere" id="comments"> <! <div id="lv-container" data-id=" City "data-uid="MTAyM*** the uid returned by the official registry ****xNzkwMw=="> <script type="text/javascript"> (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === 'function') { return; } j = d.createElement(s); j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; j.async = true; e.parentNode.insertBefore(j, e); })(document, 'script'); </script> <noscript> Please enable JavaScript</noscript> </div> <! </section>Copy the code

在\themes\random\layout\post.ejsAdd or modify the following code in the file

<% if (page.comment || theme.page_comment) { %>
  <%- partial('_partial/livere',{}) %>
<% } %>
Copy the code
  • Top loading bar

Add the following code to the \themes\random\layout\_partial head.swig or head.ejs file

< script SRC = "/ / cdn.bootcss.com/pace/1.0.2/pace.min.js" > < / script > < link A href = "/ / cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel = "stylesheet" > < style >. Pace. Pace - progress { background: #1E92FB; /* Progress bar color */ height: 3px; } .pace .pace-progress-inner { box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /* Shadow color */}.pace. pace-activity {border-top-color: #1E92FB; */ border-left-color: #1E92FB; </style>Copy the code

  • Safe operation days

Add the following code to the \themes\random\layout\_partial footer.swig or footer.ejs footer section

# tag <span id="timeDate"> </span><span id="times"> </span> <script> var now = new Date(); function createtime() { var grt= new Date("07/08/2018 12:00:00"); SetTime (now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum; } minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum; } seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum; } document.getelementById ("timeDate"). InnerHTML = "This site is running safely "+dnum+" 天 "; Document.getelementbyid ("times"). InnerHTML = hnum + "hour" + mnum + "minute" + snum + "second "; } setInterval("createtime()",250); </script>Copy the code

  • Add a uniform “End of article” tag at the end of each article

Then open the \themes\vno\layout\post.ejs file and add the following code after post-body and before post-footer

<div> <div style="text-align:center; color: #ccc; font-size:14px;" > -- -- -- -- -- -- -- -- -- -- -- -- -- end of this article < I class = "fa fa - paw" > < / I > thank you for your reading -- -- -- -- -- -- -- -- -- -- -- -- -- < / div > < / div >Copy the code
  • Add tipping function, using iframe to embed tipping

Add the following code to your desired location, usually in the

tag, such as themes, vno, layout, post.ejs


<iframe src="https://gsl201600.github.io/RewardCode" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
The project address

  • Add a cute Live 2D model to the Hexo blog

$NPM install –save hexo-helper-live2d then add the following configuration to the Blog configuration file _config.yml, refer to the documentation for details

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
Copy the code

$NPM install live2D-widget-model-shizuku: $NPM install live2d-widget-model-shizuku: Then find the live2D model you just downloaded in the node_modules folder, copy it to live2D_Models, and then edit the model.use item in the configuration file and change it to the name of the models folder in the live2d_Models folder once everything is in place, Start the server with the hexo Server command, and wait a minute to see a cute cute girl appear in the bottom right corner! But since everything is hosted on Github, Live2D may not load immediately

  • Hexo operation instructions at a glance
$hexo clean $hexo generate # generate static files $hexo server # start local server $hexo deploy # or $hexo clean # clean cache $hexo g # Generate static file $hexo s # Start local server $hexo d # deployCopy the code
  • Homebrew operation instructions at a glance
/ / install homebrew $ruby - e "$(curl - fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" / / unloading Homebrew $ruby - e "$(curl - fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)" / / view version $brew - v $brew install htop, install htop, install htop $brew Cask install Google - Chrome // Brew uninstall $brew Cask uninstall Google - Chrome $brew search Google // lists the installed packages. $brew list // $brew info Google - Chrome // Delete Homebrew download package $brew cleanup // Homebrew updateCopy the code
  • Bonus: Add Baidu and Google search engine verification to Hexo’s blog
  1. Verify the site

There are several methods of search engine verification, the following selection of HTML tag verification method, other methods are interested in you can try

  • Start by openingBaidu search engine verification, click on theAdd site, enter your ownblogaddress
  • Choose after losingHTML tag validationAnd then put the lowermetaCopy the code and leave the page open

  • Open a new page, openGoogle search engine validation, click on theAdd attributes, as input their ownblogaddress
  • Choose after losingThe alternativeUnder theHTML tagsAnd then put the lowermetaCopy the code and leave the page open

  • Open the layout/_partial folder under your local blog theme, a file named head, open it with an HTML editor, and paste in the meta code you just copied
  • After saving the file, type the following command to redeploy the blog to the GitHub server

hexo clean && hexo g && hexo d

  • Then respectively click just baidu, Google verification page verification button site verification
  1. Generating a site map
  • Open the terminal CD to the local blog directory and enter the following command to install the sitmap plug-in
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
Copy the code
  • Open the _config.yml file in your local blog directory and change the URL parameter to the first page address of your blog. This will ensure that the sitemap.xml file generates the address correctly
Url: http://jonzzs.cn # modified into your blog's home page address root: / permalink: : year / : : month/day / : title/permalink_defaults:Copy the code
  • Add the following configuration
Sitemap: path: sitemap.xml baidusItemap: path: baidusItemap.xmlCopy the code
  • Enter the following command to redeploy the blog

hexo clean && hexo g && hexo d 3. Submit your sitemap to Google

  • Open theGoogle Site ConsoleTo enter the site console, click firsttestSitemap, click after you pass the testsubmitSite map

  • Baidu’s active push

$NPM install hexo-bidu-urL-submit –save then, also in the root directory, configure the following contents into the _config.yml file:

Host: www.hui-wang.info ## submit: count: 3 # Your_token ## Please note that this is your secret key, so please do not publish the blog source code in a public repository! Path: baidu_urls.txt ## The address of the text file in which the new link will be savedCopy the code

Secondly, remember to check the url value in the _config.ym file, which must include the domain name registered by Baidu webmaster platform, for example:

# URL
url: http://www.hui-wang.info
root: /
permalink: :year/:month/:day/:title/
Copy the code

Finally, add new deployer:

## This is the original deployer repo: https://github.com/yourusername/yourusername.github.com.git / / your own making branch warehouse address: master - type: This is a new additionCopy the code

When hexo deploy is executed, the new connection will be pushed

  • Baidu automatic push

When the page is visited, the URL of the page will be immediately pushed to Baidu. Modify the layout/post.swig file under the theme directory and add the automatic push code at the end, the code is as follows

<script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); }) (); </script>Copy the code
  1. withSite: the domain nameTest success

Attached: my blog address