Build Static Blog Using Github & Hexo on Windows

Job

Configure environment

  1. install git , please ref link: http://www.cnblogs.com/zhcncn/p/3787849.html
  2. install node.js , download ：http://nodejs.org/download/,node-v0.10.33-x64.msi

Configure Github

Create a Repository from github pages

  1. Registe a account（optional）
  2. Choose a free personal plan.（optional）
  3. Verify your mail（optional）
  4. Make new Repository which must be corresponding to your user name and named your_user_name.github.io
  5. In master branch，Repository setting，overwrite automatic page generator
  6. Create a github user pages site（optional）
  7. Choose a theme（optional）
  8. Publish（optional)

Make a SSH-Key for your computer

Install Hexo

Install npm (optional)

Install Hexo

excute:

1
npm install -g hexo

npm will finish all work

Quick Start

Setup your blog

make a folder named “Hexo”, for instance,”d:\hexo”,right click ,open “git bash”,execute:

1
2
3
4
hexo init  
Copying data  
You are almost ! Dont forget to run `npm install` before you start b  
logging with Hexo!

Hexo will create files building website needed in the target folder, follow the tips,execute in the dir(d:\hexo): 

1
npm install

node_modules will be install in the dir (D:\Hexo)

Start the server

execute int the dir (D:\Hexo)

1
2
$ hexo server
[] Hexo is running at http:localhost:4000/. Press Ctrl+C to stop.

Above,it indicates Hexo Server is already running,you can see a blog Hexo inited after you open http://localhost:4000/ in a browser
and stop server by press “Ctrl+C”

Create a new post

execute int the dir (D:\Hexo):

1
$ hexo new My New Post] File created at d:\Hexo\source\_posts\My-New-Post.md

refresh http://localhost:4000/, you wiill find a new post
NOTE： (never happened)
sometimes, “My New Post” are created twice in the window of git bash,

$ hexo server
[] Hexo is running at http:localhost:4000/. Press Ctrl+C to stop.
[create] d:\Hexo\source_posts\My-New-Post.md
[create] d:\Hexo\source_posts\My-New-Post.md

After tested,when hexo server is running and hexo new “My New Post”,it will be happen,so
you should be stop server when you execute the “hexo new”

Generate static files

execute int the dir (D:\Hexo), static pages will be maked:

1
$ hexo generate

after fininshed, a serial files such as html,css will be produced

Edit post

hexo will generate a markdown(*.md) file in the dir(D:\Hexo\source_posts),you can edit it.

deploy onto Github

  1. install hexo-deployer-git modules : 

    1
    npm install hexo-deployer-git --save

  2. you need confiure the _config.yml before deployment,first,you can see:_config.yml

    # Deployment
    ## Docs: http:hexo.io/docs/deployment.html
    deploy:
    type:

    and then, modified:

    # Deployment
    ## Docs: http:hexo.io/docs/deployment.html
    deploy:
    type: github
    repository: git@github.com:zhchnchn/zhchnchn.github.io.git
    branch: master

  3. deploy
    execute int the dir (D:\Hexo), static pages will be maked:

    1
    $ hexo deploy

    NOTE:
    Repository：

    • url using SSH format : git@github.com:zhchncehn/zhchnchn.github.io.git,
      attention: you device ssh port should be opened,otherwise ,deploy failed.

      fatal: Could not read from remote repository.
      Please sure you have the correct access rights
      and the repository exists.

    • url using https format: https://github.com/zhchnchn/zhchnchn.github.io.git

Test

If browser show the page(for instance,http://zhchnchn.github.io/ ) you wanted ,it means success

make a summary:

  • each time ,you can follow three steps:

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

  • local debug your codes

    1. execute:

      1
      2
      $ hexo g #generate    
      $ hexo s #start server

    2. input:http://localhost:4000 in br owser,check it
      or simplify: 

      1
      hexo s -g

command summary

general command

hexo new postName
hexo new page pageName
hexo generate
hexo server
hexo deploy
hexo help
hexo version

composed command

hexo deploy
hexo server -g

simplify:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

sundries

there’s gonna be a space behind colon in _config.yml,like this:

error:

authorZhchnchn
email@qq.com
languagezh-CN

right：

author Zhchnchn
email@qq.com
language zh-CN

install、configure、update theme

hexo provide many great theme, https://github.com/hexojs/hexo/wiki/Themes, for example ,hexo\themes\pacman

install

Git Shell switch to /D/Hexo ，and execute:

1
$ git clone https:github.com/A-limon/pacman.git themes/pacman

configure

commute the theme property into pacman in _config.yml

update

1
2
cd themes/pacman
git pull

NOTE:
To start with backuping _config.yml,then update

customize theme

if pacman can’t fulfill the demand you need,you can customize by editing the /themes/pacman/_config.yml

comment

change the comment property to true in /themes/pacman/_config.yml

statistic

  • commute the google analysis property into true in
    /themes/pacman/_config.yml

Analytics google_analytics:

enable:
: UA-57032437- ## e.g.
UA-1766729- your google analytics ID.
site: ## e.g. yangjian.me
your google analytics site or set the value as auto.

  • you need registe google analysis server to track user ID
    in the themes\pacman\layout_partial\google_analytics.ejs,tracking code of google has been added:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <%  (theme.google_analytics.enable){ %>
    <script type="text/javascript">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', '<%= theme.google_analytics.id %>', '<%= theme.google_analytics.site %>');  
    ga('send', 'pageview');
    </script>
    <% } %>

and it will read the values of id and site in /themes/pacman/_config.yml
if it does’t work,please try add

1
<%- partial('google_analytics') %>

in the end of \themes\pacman\layout_partial\head.ejs and in front of

1
</head>

Custom 404 page

  1. replace 404.html in Hexo/source not in Hexo
  2. 404.html 
1
2
##layout: default
script ="text/javascript"="http://www.qq.com/404/search_children.js" charset="utf-8"></script

Sitemap

  1. you can install sitemap plugin,commit your site to google
1
$ npm install hexo-generator-sitemap
add in the Hexo_config.yml:

# Extensions
Plugins:
hexo-generator-sitemap
#sitemap
sitemap:
path: sitemap.xml

http://localhost:4000/sitemap.xml, you can get sitemap,file path \sitemap.xml">visit http://localhost:4000/sitemap.xml, you can get sitemap,file path \sitemap.xml
show the sitemap

in the themes/pacman/ _config.yml,add

menu:
Home: /
Archives: /archives
Rss: /atom.xml
Sitemap: /sitemap.xml

RSS

  1. install feed plugin,file path \atom.xml

    1
    $ npm install hexo-generator-feed

  2. seal off ，edit Hexo_config.yml,add

    # Extensions
    Plugins:

    • hexo-generator-feed
    • hexo-generator-sitemap

    #Feed Atom
    feed:

    • type: atom
    • path: atom.xml
    • limit: 20

目录

  1. 1. Configure environment
  2. 2. Configure Github
    1. 2.1. Create a Repository from github pages
    2. 2.2. Make a SSH-Key for your computer
  3. 3. Install Hexo
    1. 3.1. Install npm (optional)
    2. 3.2. Install Hexo
    3. 3.3. Quick Start
      1. 3.3.1. Setup your blog
      2. 3.3.2. Start the server
      3. 3.3.3. Create a new post
      4. 3.3.4. Generate static files
      5. 3.3.5. Edit post
      6. 3.3.6. deploy onto Github
      7. 3.3.7. Test
      8. 3.3.8. make a summary:
    4. 3.4. command summary
      1. 3.4.1. general command
      2. 3.4.2. composed command
      3. 3.4.3. simplify:
  4. 4. sundries
    1. 4.1. there’s gonna be a space behind colon in _config.yml,like this:
    2. 4.2. install、configure、update theme
      1. 4.2.1. install
      2. 4.2.2. configure
      3. 4.2.3. update
    3. 4.3. customize theme
      1. 4.3.1. comment
      2. 4.3.2. statistic
      3. 4.3.3. Analytics google_analytics:
      4. 4.3.4. Custom 404 page
      5. 4.3.5. Sitemap
        1. 4.3.5.1. add in the Hexo_config.yml:
        2. 4.3.5.2. http://localhost:4000/sitemap.xml, you can get sitemap,file path \sitemap.xml">visit http://localhost:4000/sitemap.xml, you can get sitemap,file path \sitemap.xml
        3. 4.3.5.3. show the sitemap
      6. 4.3.6. RSS