DBN

How it's made

github hexo
Word count: 353Reading time: 2 min
2021/11/22

Today we describe how this website is created and updated. We use a Hexo framework hosted on Github.

Hexo

Hexo is our blogging framework.

Setup

Themes

Markdown image support

Folder structure

1
2
3
4
5
6
├── _drafts
└── _posts
   ├── how-its-made
   │   ├── example.drawio
   │   └── example.drawio.svg
   └── how-its-made.md

Github

Github stores our site’s code and hosts the statically generated website.

Actions

Example

This automatically builds Hexo site from [main] branch and publishes to [gh-pages] brach.

The secret [secrets.GITHUB_TOKEN] is provided by default to the all running jobs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
name: Pages

on:
  push:
    branches:
      - main  # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
        - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs
          publish_branch: gh-pages  # deploying branch
          cname: dbnservers.net

Pages

  • Pages docs
  • Configure to watch branch [gh-pages] root [/root] folder.
  • Setup a custom domain and SSL

Diagrams.net

Used to create diagrams.

Create new diagram

  • Download desktop client from diagrams.net
  • New diagram
  • Navigate to post folder [source/_posts/how-its-made]
  • Name [example.drawio]

Export as SVG

  • File, Export as, SVG
  • Navigate to post folder [source/_posts/how-its-made]
  • Name [example.drawio.svg]

Markdown

Formatting syntax for blog posts.

Cheatsheet

Example header structure

This section controls how the page is rendered and various metadata. 

1
2
3
4
5
6
7
8
9
10
---
title: How it's made
date: 2020-01-01 01:00:00
tags:
- hexo
- github
header_image: /intro/index-bg.jpg
categories:
  - blog
---

Example of body structure

Use <!-- more --> to generate cleaner excerpts on homepage. 

1
2
3
4
Description of today's post
<!-- more -->

Additional content here.

Example image code

1
![simple diagram](/blog/how-it-s-made/example.drawio.svg)

Results in :

simple diagram

Author：Martin

Link：https://dbnservers.net/blog/how-it-s-made/

Publish date：November 22nd 2021, 11:20:00 am

Update date：February 8th 2023, 3:30:42 am

License：creative commons 4.0

CATALOG
  1. 1. Hexo
    1. 1.1. Setup
    2. 1.2. Themes
    3. 1.3. Markdown image support
    4. 1.4. Folder structure
  2. 2. Github
    1. 2.1. Actions
      1. 2.1.1. Example
    2. 2.2. Pages
  3. 3. Diagrams.net
    1. 3.1. Create new diagram
    2. 3.2. Export as SVG
  4. 4. Markdown
    1. 4.1. Example header structure
    2. 4.2. Example of body structure
    3. 4.3. Example image code
network cloud blog networking frontend
Total : 9
2023
2022
2021
frr bgp mpbgp aws python typescript docker github ubuntu cisco mpls ospf isis hexo iterm Python consulting react javascript