Why did I choose Hexo-fluid?

At present, there are many ways to build personal blog, but the ultimate goal is actually very simple, is to record their own technology learning process, so I don’t want to put the cart before the horse and waste too much time. The main reasons I chose the Hexo blog framework to build a blog are as follows:

  • It is very convenient and fast, and can realize self-adaptation. The most important thing is beautiful, which makes me motivated to write
  • There are a lot of great examples of Hexo framework modifications on Github, which made me want to try one out to create my own business card

The reason for choosing Fluid theme is purely because the documentation is comprehensive and well maintained, which enables me to build my blog efficiently and stably.

❝

Waste a lot of time in choosing its blog theme, before eventually chose a topic, but the actual building and maintenance of late to waste a lot of time finding out information, late or even start still have some problems, but also to change the source file, I can’t very good focus on the blog itself in this matter, so I am very clear and efficient simple stability is my first demand. In the subsequent use of Fluid theme, I was more determined to choose Fluid YYds!

❞

Blog Building process

I would like to present Hexo official documentation and Fluid documentation first. It is suggested that the blog should be built according to the official documentation first, and then the Fluid configuration guide should be used to start the configuration. In the following article, I will only talk about some of the problems and solutions I encountered during the construction, other documents are very clear.

  • Hexo official documentation
  • Fluid document

No permission to edit files

I still have this problem after modifying the operation permission of the file, terminal will execute the following code to solve it

Sudo chmod -r 777. Sudo chmod -r 777Copy the code

Use of making pages

The basic configuration

IO username. Github. IO but I prefer to use another repository for my blog, so I created a repository called blog. Because of the incorrect configuration in _config.yml, I compiled the file with incorrect reference path and incorrect style. The correct configuration is shown below

url: https://username.github.io/blog
root: /blog
Copy the code

Search function check

If you use the blog sub-page to access Github Pages, change the path of the search page to the blog repository. Otherwise, the search page will continue loading because it cannot be found

Path: /blog/local-search.xml: /blog/local-search.xmlCopy the code

Custom domain name

If you want to use github Pages to create your own domain name, write your own domain name for the URL. Note out the root line

url: https://blog.strugglinglee.cn
# root: /blog
Copy the code

Setting -> Pages -> Custom DomainI use Tencent Cloud, and other operators should be similar. The host record is blog, the record type is CHAME, and the record value is the domain name of Github Page

At present, it is convenient to configure SSL certificates and use HTTPS secure links to access them. Common carriers can support one-click application and deployment, which does not require too many operations. Remember to record your website in advance.

How to Modify the Configuration

I took a lot of detours here. I’m used to Google and it’s a waste of time. I recommend fluid documentation and github.com/fluid-dev/h… To modify the configuration

For example, if I want to change my site’s favicon icon, I can search for favicon directly in the _config.yml file with CTRL + F, copy these two lines into my own YML file and change them.

❝

You can look at _config.yml for yourself. Having an understanding of some basic configurations will be easier for you to modify later.

❞

Automatic compile deployment

Configuration method

I used the Travis – Ci third-party automated compilation deployment recommended by HexoLinks to invite According to the configuration step by step, with a good is very simple, push to deploy directly

Compilation problem handling

Sometimes the cache file is not updated, or the following YARN error occurs when I configure the deployment according to the official YML file

The command "yarn" failed and exited with 1 during .
The command "eval yarn --frozen-lockfile " failed. Retrying, 2 of 3.
Copy the code

Here is my modified YML file

Sudo: false language: node_js node_js: - "14" # use nodejs V14 LTS Resolve YARN error reports Cache: NPM Branches: only: -main # build master branch only install: -hexo clean # generate # generate static files deploy: provider: pages skip-cleanup: true github-token: $GH_TOKEN keep-history: true on: branch: main local-dir: publicCopy the code

Travis – CI is stable and fast to compile and deploy, so I recommend it. Then I read about github’s own Github Actions, which are free, and decided to take the time to play.

Custom iconfont usage

Official configuration custom IconFONT document

Use process Reference

You can see that the official file handles iconfont this way using pseudo-elementsThere is no practical reference, we can actually use background to handle, for example, I want to use a little gold digger icon to put on the about page, how to do this

  1. Create a CSS folder under the Source folder and create a new custom.css file

  2. Add this line to the _config.fluid. Yml file custom_css: / CSS /custom.css

  3. Paste code similar to the following into the CSS file

    .icon-juejin-fill { display: inline-block; width: 24px; height: 26px; background: url('data:image/svg+xml; utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220 20 the fill % 200% 2031% 2024% 22% 22% % 3 d % 22 none % 3 e % 3 cpath % 20 fill - rule % 3 d % 22 evenodd % 22% clip - 20 rule % 3 d % 22 evenodd % 22% 20 d % 3 d % 22 m15. 073 7% 205.80396 H15.0757 L18.706 202.91722 200.00406298 L15.0717 L15.0757% % % 200 l11. 202.91112 205.80193 L15.0737 L15.0717% % 205.80 4475% 396 zm15. 0757% 2014.9111 L15.0778 L15.0778 205.48096 2014.9091 207.52057 L21.9036 L24.4429% % % % 2010.8664 2010.8685 L15.0737 L15.0757% 2010.8705 205.48502 L5.71057 L8.2479% % % 207.52463 L15.0737 L15.0757 2019.9614 2014.9132 2014.9111 ZM15.0716 L15.0757% % % % 2019.9593 L2 7.614% L30.1534 2010.066 2012.1056 2016.6053 L15.0757 L24.449% % % 2024 L0. 243779% 2012.3047 L0 2012.1117 2010.0721 L15.0716 L2.53936% % % 20 the fill % 3 d 2019.9614 Z % 22% % 22% 231 e80ff % 22% 2 f % 3 e % 3 c % 2 FSVG % 3 e ') no - repeat center 4 px; background-size: 100%; }Copy the code

  4. The I tag is referred to by class

❝

Note that SVG files need to be encoded by encodeURIComponent method, otherwise there will be compatibility problems, some models will not see, such as my MAC icon will disappear problem

❞

Comment on the selection of plug-ins

Comments configuration document entry

Fluid already has a lot of support for review plugins, which can be quickly and easily configured by following the reference documentation link at github.com/fluid-dev/h… Search for the corresponding keywords in the file and fill in the relevant configuration copy.

By the way, Twikoo (based on Tencent cloud development) actually looks very easy to use. You can also automatically generate your OWN QQ profile picture when you type in your QQ email address, but it is not free. BTW, the free Valine already smells great, as shown below.

The above is my recent initial attempt at Hexo-fluid, which has achieved initial success and given me more motivation to write articles.

feeling

The process of solving problems is difficult, but as long as you keep trying, the moment of success is indescribable. In addition, I deeply realized that nothing can be lazy at the very beginning. We must first have a global plan and choose the most suitable plan by comparing with many others, otherwise it will only be a waste of time and keep hitting the south wall. As long as you are on the right path and insist on it, although there will be some stumbles in the process, you will gain after success in the end.