1 Original intention
I started sharing documents very early, mainly technical ones. At first it was MSN and blogs. As the platforms changed, I later used CSDN, Zhihu, Jianshu… and then Obsidian, Feishu, Notion, Often have the following problems:
1.1 Question
- Each platform has different formats and different review rules. It takes a lot of time to upload to multiple platforms, and the document update cost is also high.
- The classification is too simple, the search is difficult, and it cannot meet the requirements.
- Although I have accumulated some points and attention, the platform has changed, been hacked, and is uncontrollable.
- There are many things I want to express: technical articles, book reviews, travel, painting, other works, daily feelings; different styles of long articles and short articles, documents and fields; the tonality of each platform and the audience are different. If they are all put together, it will look very different. major.
1.2 Advantages
From this point of view, self-built platforms are relatively freer and more convenient:
- Rent a server for a few hundred dollars per year, or use a free platform first.
- Migrate from content to data more freely. You can use tools to switch platforms, reduce time costs, and share/update with one click.
- Construct a state between “showing to yourself” and “showing to others” to open up public/private sharing content.
- Create deep links between your blog and other content.
- Design your own logic and make your own classification and blocking rules so that different types of content do not interfere with each other.
1.3 Disadvantages
But there are also some problems:
- Learning cost: Although the entry cost is not high, it takes a lot of time to be satisfied.
- Too much content: When there are thousands of articles and hundreds of content to be shared, and there are many categories, it is difficult to make the layout look good, and it will introduce time costs for organization and design.
- Let more people see it: if you write it on a public website, good writing will be recommended, and the attributes and categories of the platform will attract more readers; however, it is relatively difficult to promote your own website, and some free websites are blocked by Baidu search If you lose it, you can only apply for your own domain name.
- Cost of building a website: In addition to buying a domain name, you also need to register the website with the public security, which is also time-consuming and labor-intensive.
In short, choosing a self-built platform/public platform mainly depends on the situation, but it is always good to learn more and have more choices.
2 Design ideas
2.1 Select platform
The ultimate goal is to save time and effort and switch to various servers and platforms at any time. Specific steps are as follows:
- Find a free platform first
Github.io is used here. Its usage is similar to that of ordinary github projects, and it can be easily switched to any historical version. - Design a convenient switching method
In order to easily switch to a general Linux server later, it is mainly based on the architecture of: Docker environment + Python back-end tools + JS front-end tools.- Docker: easy to switch platforms;
- Python: I am relatively comfortable using Python, and I can add some interesting functions later;
- Front-end: Hexo was selected for the front-end in advance for the following reasons:
- You can start the service yourself, or you can generate static web pages and automatically deploy them to existing web services.
- Seamlessly connect to previous markdown writing style.
- There are many plug-ins and many network themes to choose from.
2.2 Access private notes and shared notes
Previously, notes were written in Obsidian, mainly using markdown format. However, the file header was not written in a standardized manner, which caused the list cards to display abnormally after being converted to Html. Here, simple Python code is used to edit the file headers of all documents. to ensure that the document is displayed normally. (Very simple, being sorted out, will be uploaded to github project later, or made more general)
2.3 Reduce sharing costs
- Design sharing rules
Divide notes into two categories: sharing and non-sharing; non-sharing includes some unfinished documents, templates, tests, and some content that is not humane. If most of them can be shared, hexo comes with an exclusion function. So just use the directory to distinguish. If there are further requirements, some programs or plug-ins are required. - Quickly deploy to server
Hexo supports deployment functions, which can be achieved through configuration files and some simple scripts: sharing/updating markdown notes to the blog with one click.
2.4 Design display
- Hexo’s default Theme divides the display into: classified by tags, classified by date, and recent articles. Implement the basic functions first, and then expand them through plug-ins later.
- Choose your preferred display style Theme.
In short, the early stage architecture used a combination of Docker + github.io + Hexo, which is low-cost and highly scalable. The specific methods are introduced one by one below.
3 github.io website building
3.1 Create a warehouse
https://github.com/new
Note: The repo name needs to be filled in: “username.github.io” format. Only your username can be used, which means that each github account can only create one github.io homepage.
3.2 Create static web pages
$ git clone [email protected]:username/username.github.io.git $ cd username.github.io.git $ echo 'hello world!!!' > index.html $ git add index.html $ git commit -m 'init' $ git push origin master
After submitting, you need to wait for a while before you can access: https://username.github.io/. I waited for about two minutes.
4 Hexo Framework
Hexo is a simple, fast, and powerful blog publishing tool that supports Markdown format and has many excellent plug-ins and themes. I generally use Markdown syntax to write articles, generate static web pages through the Hexo command line tool, and deploy them to the website through Hexo.
4.1 Configuration environment
Before installing Hexo, you must first install a javascript development environment. Because I was afraid of trouble, I directly used Hexo’s docker image ready-made environment. The specific version uses the lightweight and stable alpine version of the system. The entire image is only a few dozen megabytes, and it also contains a simple vi editor. My host system is Ubuntu 22.04. The specific operations are as follows:
$ docker pull taskbjorn/hexo:alpine-latest $ sudo mkdir /exports/hexo_data -p #The data is stored outside docker $ sudo chmod 777 /exports/hexo_data $ docker run -it --rm --name my_hexo_container --privileged=true -p 4000:4000 -v /exports/hexo_data:/home/hexo/.hexo taskbjorn/hexo:alpine-latest # Start the image
When running for the first time, the data is installed to the /home/hexo/.hexo directory, which is relatively slow, but it is faster when it is started again.
After normal startup, you can use localhost:4000 to access the blog locally, and it will be automatically updated when new content is generated without restarting the service.
Enter the docker container from another terminal to operate Hexo using the command:
$ docker exec -it my_hexo_container sh
When you enter docker, you can see that the current user is hexo and the project file has been created in the current directory.
The package is installed in the node_modules directory, source data such as markdown is in the source directory, the generated files are in the public directory, and the main configuration file is _config.yml.
4.2 Configuration File
_config.yml is the most basic configuration file, at least its site part needs to be set:
title: 'title' subtitle: 'subtitle' description: 'Website description' author: author language: zh-Hans timezone: 'Asia/Shanghai'
4.3 Basic operations
$ hexo cl # hexo clean clear cache $ hexo g # hexo generate Generate static web pages $ hexo d # hexo deploy deployment $ hexo s # hexo server starts the service preview. Since docker has already started the service, this operation is not needed.
4.4 Markdown Specification
For web pages generated through markdown, if the file header is not set, only the file creation date will be displayed in the list:
Therefore, at least the title needs to be set for normal display. Generally, title, author, date, tags are set. Obsidian’s hexo template is as follows:
--- title: <% tp.file.title %> author: xieyan0811 date: <% tp.file.creation_date() %> updated: <% tp.file.last_modified_date() %> tags: ---
4.5 Deploy blog to github.io
4.5.1 Configure github password-free environment
$ git config --global user.email your email $ git config --global user.name your username $ ssh-keygen -t rsa -C your email # Press Enter all the way
If it prompts that ssh-keygen cannot be found, it may be that the software is not installed in the docker environment. Since the alpine environment is installed, you need to log in with root privileges to install the software (it is recommended to start a separate terminal):
$ docker exec -u=root -it my_hexo_container sh # Log in as root # apk add openssh # Install openssh toolset
Add the contents of /home/hexo/.ssh/id_rsa.pub to github. The specific method is:
https://github.com/settings/keys add ssh key
After setting up, check whether it can be used normally:
$ ssh [email protected] # The normal result is in the form: You've successfully authenticated
4.5.2 Configuration File
Modify the configuration file _config.yml and set the deployment service
deploy: type: 'git' repo: [email protected]:username/username.github.io # Note that this is not an http address branch: master
4.5.3 Deployment
$ npm install hexo-deployer-git # Install hexo’s git plug-in $ hexo g # Generate static web page $ hexo d # Deploy to github.io
After normal execution, you can see that the public directory content is updated to the github.io homepage. The content is not much, less than 1M when there is only demo.
4.6 Display pictures
Hexo supports multiple methods of displaying images, such as image beds, uploading images, etc. Here is the simplest method:
4.6.1 Install plug-in
$ npm install hexo-asset-image $ npm install hexo-renderer-marked
4.6.2 Configuration File
Keep post_asset_folder: false in the _config.yml configuration file unchanged, and add the marked setting:
post_asset_folder: false marked: prependRoot: true postAsset: true
- My pictures in Obsidian are placed in the attachments/ directory. Copy this directory to the source directory of the Hexo project, namely: source/attachments/xx.png
- After hexo g is regenerated, the picture displays normally.
- Note that when there are few pictures, it is recommended to use this method. When there are many pictures, the github project also becomes “heavy”, so it is recommended to use the picture bed.
4.7 Change theme
It is recommended to set a commonly used theme, such as next, so that you can check information when encountering problems.
For official website themes, see: https://hexo.io/themes/
- Install theme
npm install hexo-theme-next #Install in the node_modules/ directory cp node_modules/hexo-theme-next/_config.yml _config.next.yml # Copy the theme configuration file
- Modify configuration: In _config.yml, modify: theme: next
- After regenerating, you can see the new theme
4.8 Debugging
- Check software version
hexo -v
- View detailed debug information
hexo g --debug # Add --debug parameter
- ignore some articles
Modify _config.yml. After modification, be sure to clear the cache before generating, otherwise the settings may not take effect.
skip_render: ['in_progress/**/*']
5 Reference
Hexo + Obsidian + Git perfect blog deployment and editing solution
Build a personal blog – Hexo + Markdown + Github Pages
How to make Hexo not render certain files
hexo relative path image display
How to insert pictures into hexo blog
Build your own github.io blog
Blogging on github.io