Hexo + Github Pages: Hexo + Github Pages

Hexo + Github Pages Hexo + Github Pages Hexo + Github Pages Hexo + Github Pages Hexo + Github Pages Hexo + Github Pages Hexo + Github Pages Hexo + Github Pages

System Environment Configuration

To use Hexo, you need to support Nodejs as well as Git on your system. If you don’t already have it, start installing it!

Installation Node. Js

Install Node.js

Install Git

Download it at http://git-scm.com/download/

Install Hexo

$CD d:/hexo $NPM install hexo-cli -g $hexo init blog $CD blog $NPM install $hexo g # Or Hexo Server, which can be viewed at http://localhost:4000/Copy the code

It’s worth mentioning some of the commands Hexo uses:

Hexo generate (hexo g) Generates a static file that generates a new folder called public in the current directory
Hexo Server (HexO S) launches a local Web service for a preview of the blog
Hexo deploy (Hexo D) to deploy podcasts to remote sites (such as Github, Heroku, etc.)

There are several other common commands:

$hexo new page "pageName" # new pageCopy the code

Commonly used abbreviations

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deployCopy the code

Common combination

$hexo D - G # Build deployment $hexo S -g # Build previewCopy the code

Now you can open http://localhost:4000/ and see a built-in blog.

The local environment I am currently using for the installation is as follows :(can be viewed by hexo -v)

Hexo: 3.2.0 hexo- CLI: 1.0.1 OS: Windows_NT 6.3.9600 win32 x64 http_Parser: 2.5.2 node: 4.4.1 V8:4.5.103.35 UV: 1.8.0zlib: 1.2.8 ares: 1.10.1-DEV ICU: 56.1 modules: 46 Openssl: 1.0.2gCopy the code

Hexo theme Settings

Here, the theme Yilia is taken as an example.

Install the theme

$ hexo clean
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yiliaCopy the code

Enable the theme

Modify the theme property in the _config.yml configuration file in the Hexo directory to set it to yilia.

Update the theme

$CD themes/yilia $git pull $hexo g # generate $hexo s # start local Web serverCopy the code

Now open http://localhost:4000/ and see that we have applied a new theme.

Making Pages set

What is Github Pages

GitHub Pages is used to introduce projects hosted on GitHub, but since its space is free and stable, it’s perfect for creating a blog.

Each account can only have a warehouse to store personal home page, and the name of the warehouse must be username/username. Making. IO, this is a special naming convention. You can use http://username.github.io to access your personal page.

Note that the content of your personal home page is under the Master branch.

Create your own Github Pages

How to use GitHub Pages to register for GitHub has been discussed in many articles, which will not be detailed here.

Step by step create a full series of blog pages on GitHub

How to Build an Independent Blog — Concise Github Pages with Hexo Tutorial

Here I created a Github repo called Jiji262.github.io. Create completed, is to be submitted once (git commit) operation, and then can be accessed through the link http://jiji262.github.io/. (No content yet, don’t worry)

Deploy Hexo to Github Pages

This step is perhaps the most crucial step, let’s preview in local web environment to blog on the deployment to making, and then can be directly accessed through http://jiji262.github.io/. However, many tutorial articles are vague about this step, so I highlight it here.

First, you need to understand how deploying to Github works.

One of the biggest features of the special repo (jiji262.github.io) created on Github in the previous step is the HTML static file in its master, which can be accessed directly by linking to http://jiji262.github.io.
Hexo-g generates a static website (for the first time a public directory is generated) that can be accessed directly.
Git commit the static site generated by Hexo to Github

Once you understand the principle, it becomes clear how to do it.

Use hexo deploy to deploy

Hexo deploy can be deployed to a number of platforms, as shown here. If deployed on Github, you need to modify the configuration file _config. XML as follows:

deploy:
  type: git
  repo: [email protected]:jiji262/jiji262.github.io.git
  branch: masterCopy the code

Then execute it on the command line

hexo dCopy the code

The deployment is complete.

Note that an extension needs to be installed in advance:

$ npm install hexo-deployer-git --saveCopy the code

Deploy using the Git command line

Unfortunately, while the above commands are simple and convenient, they occasionally cause baffling problems, so you can always go back to the source and use git commands to complete your deployment.

clone github repo

$ cd d:/hexo/blog

$ git clone https://github.com/jiji262/jiji262.github.io.git .deploy/jiji262.github.ioCopy the code

Clone the repo we created locally and create a directory called. Deploy to store the cloned code.

Create a deploy script file

Hexo generate cp -r public / *. Deploy/jiji262 lot. IO CD. Deploy/jiji262 lot. IO git add. The git commit -m "update" git  push origin masterCopy the code

To simplify, hexo generate generates new content in the public folder and copies it to jiji262.github. Then use git commit to commit the code to the master branch of the repo, jiji262.github.

When you need to deploy, execute this script (you can save it as deploy.sh, for example). You may need to enter the username and password of your Github account and follow the instructions.

Hexo theme configuration

Each topic requires a different configuration. The topic configuration file is in the topic directory _config.yml. Take the yilia theme we used, which provides the following configuration item (theme\yilia_config.yml) :

SubNav: Github: "#" Weibo: "#" RSS: "#" zhihu: "#" #douban: "#" #mail: "#" #facebook: "#" #google: "#" #twitter: "#" #linkedin: "#" rss: /atom.xml # Content excerpt_link: more fancybox: true mathjax: true # Miscellaneous google_analytics: '' favicon: Avatar: "" # open share: true # Open duoshuo comment, fill in the name of the project you applied duoshuo: Duoshuo: true # Indicate whether to enable the tag tagcloud: - # Friends: false # Enable about me Aboutme: Who am I, where am I from, and where am I going? I am who I am, a different color foodie...Copy the code

Other advanced usage skills

Bind independent domain name

Buy a domain name configure DNS resolution with your domain registration provider to obtain GitHub IP address Click to go to the source directory and add the CNAME file

$git add CNAME $git commit -m "add CNAME"Copy the code

Using figure bed

Using seven NiuYun store their structures, the figure of the bed on making: http://jiji262.github.io/qiniuimgbed/, seven cows need to first register account to use.

Add the plug-in

Add sitemap and feed plug-ins

$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemapCopy the code

Modify _config.yml and add the following content

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xmlCopy the code

After a match, you can visit http://jiji262.github.io/atom.xml and http://jiji262.github.io/sitemap.xml, found that the two files has been successfully created.

Add 404 public welfare page

GitHub Pages provides guidelines for creating 404 Pages: Custom 404 Pages.

Create your own 404.html or 404.md directly in the root directory. However, custom 404 pages only work for projects that are bound to top-level domains, GitHub’s default assigned secondary domains don’t work, and using Hexo Server on native debugging doesn’t work either.

Tencent commonweal 404 is recommended.

Add about page

$ hexo new page "about"Copy the code

The directory \source\about\index.md will generate an index.md file. You can open it and enter your personal information. If you want to add copyright information, you can add:


       

        

         

        

        
         Links to this article:
         "><%= post.title="" %=""> 
         

The author:
         Linghu onion 
         

Reference:
         jiji262.github.io/

         

This article is based on
         Creative Commons Attribution - Share 4.0 in the same wayInternational license for publication, reproduction, interpretation or for commercial purposes, but the attribution of this article must remain
         Linghu onionAnd links.
        

       
Copy the code

Add Fork me on Github

Access code, and choose you like to add the code to hexo/themes/yilia/layout/layout. At the end of ejs can, pay attention to the code you want to take you lot account name.

Add alipay donation button and QR code payment

Alipay donation button

Create a new zhifubao.ejs file under D: hexo\themes\yilia\layout_widget with the following contents

To watch his

       

    
        


    
        
    
        
    
        
    
        
    
        


       
Copy the code

After adding this file, enable it in the D:/hexo/themes/yilia/_config.yml file, as shown below, add zhifubao

widgets:
- category
- tag
- links
- tagcloud
- zhifubao
- rssCopy the code

Qr code donation

First of all, you need to go here to get the QR code picture of your Alipay account. Alipay provides a custom function to add custom text.

My QR code scan donation is added to the About page, of course you can also add it to other pages, under D: hexo blog source about there is index.md, open it and add it in the appropriate place

Welcome to donate to this site, your support is my biggest motivation! ! [][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]

Copy the code

You can center the image by changing the link address to yours.

Add baidu site search

Click enter, click other tools -> Site search -> Use now -> New search engine -> View the code, copy the id value in the code, open /d/hexo/themes/jacman/_config. XML, and configure it as follows.

baidu_search:     ## http://zn.baidu.com/
  enable: true
  id: "1433674487421172828" ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default siteCopy the code

Add visitor statistics using the garlic seed

Refer to your website count for details by simply adding this script to the bottom of your Themes /your Themes /layout/_partial/footer.ejs

Copy the code

Then, in

Add the following statistics in the middle

Total number of visits to this site, number of visitors, total number of reads of this articleCopy the code

Garlic son official service site is not garlic son, the biggest drawback is not open registration, so for a period of time to run the site, garlic son data are from 1, there is no way to set, only after the late open registration, login website to set the statistics.

Refer to the link

Github Pages Hexo From Octopress to Hexo How to Build an Independent Blog – Simple Github Pages with Hexo How to Build a Cool personal blog in Your own name in just one day Syntax (Simplified Chinese Version)