Hello, My Page

发表于 | 分类于

Hello, My Page

  • Use Github Pages and Hexo to host your own blog.

Install and Config

GitHub Pages

  1. You need to Register GitHub and Install Git
  2. New repository, repository name is yourname.github.io
  3. Settings - GitHub Pages - Launch automatic page generator

Hexo

  1. Install Node.js, since you need use npm(node package management)

  2. Choose an empty folder, for example hexo, input

    1
    2
    3
    $ cd hexo
    $ npm install hexo-cli -g
    $ npm install hexo --save

  3. Input

    1
    $ hexo -v

  4. If you can see the version information, you have successfully install Hexo.

  5. My structure is like below. Some folders will be added after following steps, and now you can ignore it.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    - hexo
      - .deploy_git
      - node_modules
      - public
      - scaffolds
      - source
        - _posts
        - about
        - tags
        - categories
        - images
      - themes
        - landscape
        - next
      .gitignore
      _config.yml
      db.json
      debug.log
      package.json

Configuration

  1. You can modify site settings in _config.yml with Docs of Configuration.

Themes

  1. You can choose your favorite Themes for your blog in Themes and my recommendation is NexT.

Busuanzi

  1. You can use busuanzi to count viewers
  2. Open themes/next/layout/_config.yml and modify the settings enable:true of busuanzi_count 
1
2
busuanzi_count:
  enable:true
  1. Open themes/next/layout/_partials/footer.swig
  2. Add the following code at the beginning.
1
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  1. Add the following code at the end.
1
2
3
4
5
{% if theme.busuanzi.count && theme.busuanzi.count.enable %}
  <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
{% endif %}

Create and Deploy

Create a new post

  1. Input

    1
    $ hexo new "My New Post"

  2. You can write your post like

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ---
    # Yaml or Json
    title: Hello, My Page
    date: 2017-09-15 00:00:00
    updated: 2021-03-20
    tags: 
        - GitHub Pages
        - Hexo
        - NexT
        - CS Learning
    categories: 
        - CS Learning
    ---
    <!-- Markdown -->
    # Hello, My Page

  3. More Detail for writting

  4. More Detail for front matter

Create a new page(such as about/tags/categories)

  1. Input

    1
    $ hexo new page "about"

  2. You will find a new folder named about in your source folder, and a index.md file in it.

  3. You can write your index.md like
    1
    2
    3
    4
    5
    6
    ---
    title: 关于
    date: 2017-09-17 15:53:11
    type: "about"
    ---
    ## About me.

Run server

  1. The first time you want to run server, you need install hexo-server, which has been separated from the main module.

    1
    $ npm install hexo-server --save

  2. Once the server has been installed, input

    1
    $ hexo server  // or you can input `hexo s`

  3. Your website will run at http://localhost:4000. It’s not necessarily for you to restart the server since hexo will watch for file changes and update automatically.

  4. More Detail

Generate and deploy

  1. Input

    1
    $ hexo d -g

  2. More Detail for Generate

  3. More Detail for Deploy

Clean the cache

  1. Input

    1
    $ hexo clean

  2. You can delete the post in the _post folder and then clean the cache to delete the post.

References