编程知识 cdmana.com

Build a free personal blog with GitHub and hexo

Every programmer needs a personal blog , At present, what is widely seen in people's view is CSDN、 Blog Garden 、 Simple books , But they didn't give users a dedicated site 、 A memorable domain name . You need one https://xxx.xxx.xxx/ Format of the URL , A free code site , A real personal blog .

1. GitHub Free website provided by

1.1 GitHub—— Hosting platform for open source and private software projects

GitHub Official website

As an open source code base and version control system ,Github Have more than 900 Million developer users . As more and more applications move to the cloud ,Github It has become the preferred way to manage software development and discover existing code .
—— source : Baidu Encyclopedia

GitHub It's the largest code repository at present , If you haven't GitHub If you have an account number , Go to the official website to register one .

1.2 GitHub Pages—— Free to provide the most basic static website

GitHub Pages Official website

Every GitHub Account can open a static website for free ( The domain name is username.github.io), The website was created by GitHub Pages Provide , The domain name is omitted 、 The server 、 Put on record and so on a series of problems that need to be considered when building a station , Just need a static website code .

First you need to create a GitHub Pages repository.GitHub Pages repository With ordinary repository It's the same , The only difference is that his name must be username.gihub.io. This official tutorial GitHub Pages It's easy to understand , Press this to finish and you will have a website username.github.io
Such as your GitHub User name is abc, So your repository The name and address are abc.gihub.io

Now it's only one step away from a good website , Copy all the files of a good website to your library .
GitHub The official advice is that you use the blogging tool Jekyll .GitHub In the library settings, there are also Jekyll Topic selection .

This article will introduce Hexo Generation tool .

2. Hexo Build a static blog site

2.1 Hexo—— Fast 、 Simple and efficient blog framework

Hexo Official website

Ultrafast speed
Node.js Super fast generation speed , Rendering hundreds of pages in seconds .
Support Markdown
Hexo Support GitHub Flavored Markdown All functions of , It can even be integrated Octopress Most plug-ins for .
One key deployment
Only one instruction is needed to deploy to GitHub Pages, Heroku Or other websites .
Rich plug-ins
Hexo Powerful plug-in system , Installing plug-ins enables Hexo Support Jade, CoffeeScript.

2.1.1 Installation premise

install Hexo Pretty simple . However, before installation , You must check that the following applications are installed on your computer :

  • Node.js (Should be at least nodejs 6.9)
  • Git

If you have the above prerequisites installed on your computer , So congratulations ! Next, just use npm Can finish Hexo Installation .

$ npm install -g hexo-cli

If the required program is not installed on your computer , Please complete the installation according to the following installation instructions .

Mac user
You may have problems compiling , Please come first App Store install Xcode,Xcode After completion , Start and enter Preferences -> Download -> Command Line Tools -> Install Install command line tools .

2.1.2 install Git

Windows: Download and install git.
Mac: Use Homebrew, MacPortsbrew install git; Or download Erection sequence install .
Linux (Ubuntu, Debian):sudo apt-get install git-core.
Linux (Fedora, Red Hat, CentOS):sudo yum install git-core.

Windows user
For well-known reasons , Download... From the link above git for windows It's better to put up a proxy , Otherwise, the download speed is very slow . You can also refer to This page , Contains the download address stored in Baidu cloud .

2.1.3 install Node.js

install Node.js The best way is to use nvm.

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

After installation , Restart the terminal and execute the following command to install Node.js.

$ nvm install stable

Or you can download Erection sequence To install .

Windows user
about windows Users , It is recommended to use the setup program to install . When installing , Please check. Add to PATH Options .
in addition , You can also use the Git Bash, This is a git for windows It comes with a set of programs , Provides Linux Style shell, In this environment , You can directly use the above command to install Node.js. The way to open it is simple , Right click anywhere , choice “Git Bash Here” that will do . because Hexo Many of the operations involved in the command line , You can consider always using Git Bash To operate .

2.1.4 install Hexo

After all the necessary applications are installed , You can use npm install Hexo.

$ npm install -g hexo-cli

2.1.5 Station building

install Hexo After completion , Please execute the following order ,Hexo The required files will be created in the specified folder .

$ hexo init <folder>
$ cd <folder>
$ npm install

After new creation , The directory of the specified folder is as follows :

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

2.2 Hexo Custom configuration and blog theme

2.2.1 _config.yml

Website configuration information , You can configure most of the parameters here . Each configuration parameter in the file has detailed remarks , Fill in the required information according to the rules .

2.2.2 package.json

Information about the application ,EJS、 Stylus and Markdown renderer Installed by default , You are free to remove .

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

2.2.3 scaffolds

Template folder , When you create a new post ,Hexo Will be based on scaffold To create documents .

Hexo Template refers to the new template markdown The default filling content in the file . for example , If you modify scaffold/post.md Medium Front-matter Content , Then every time you create a new article, you will include this change .

2.2.4 source

The resource folder is where the user's resources are stored , except _posts Outside the folder , It begins with _ ( Underline ) The file of / Files that will be ignored and hidden .Markdown and HTML The file will be parsed and put into public Folder , And other files will be copied .

2.2.5 themes

Theme folder ,Hexo Static pages will be generated according to the theme .GitHub There are many third-party themes on , Introduce according to the document introduction of the topic Hexo In the project , A corresponding folder will be generated under the theme folder , Revise _config.xml The folder theme Attribute is enough .

This article will introduce Indigo The theme .

3. Indigo The theme ——Material Design Style Hexo The theme

Indigo in GitHub

Support only IE10+ Wait for modern browsers .
Go to jQuery, Lighter . Believe in the native compatibility of modern browsers .
Use Less As css The preprocessor , Need to install hexo-renderer-less.
Added support for English Fonts Roboto.
Added some ripple effect .
Sharing implementation without front-end dependency .
Site search based on static data , No third party intrudes .
Support article reward .

There are two main branches , My blog uses card Branch card style theme ,master Branches are old style tile themes .

3.1 install

Installation needs to confirm your Hexo Version in 3.0 above , as well as Node Version is 6.x above , stay Hexo root directory , Execute the following command .

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

3.1.1 Switching themes

perform git branch Show all local branches , If there is only one branch , You can execute the following command to get the topic of another branch .

#  Get remote  card  Branch , And switch 
$ git checkout -b card origin/card

#  Get remote  master  Branch , And switch 
$ git checkout -b master origin/master

This command only needs to be executed once , Then use git checkout [branch] Command to switch between two topics .

3.1.2 Dependent installation

Still Hexo root directory , If the following plug-ins have been installed , No need to install again .

Less

The default theme is less As css Pretreatment tools .

$ npm install hexo-renderer-less --save

Feed

Used to generate rss.

$ npm install hexo-generator-feed --save

Json-content

Static data is used to generate sites , Data source for on-site search .

$ npm install hexo-generator-json-content --save

QRCode

Used to generate wechat sharing QR code .

Optional , When not installed, it will request jiathis Api Generate qr code .

$ npm install hexo-helper-qrcode --save

3.1.3 Open the tab

hexo new page tags

modify hexo/source/tags/index.md Metadata

layout: tags
comments: false
---

3.1.4 Open the category page

only card theme Support .

hexo new page categories

modify hexo/source/categories/index.md Metadata

layout: categories
comments: false
---

3.2 common problem

3.2.1 How to set the article abstract

stay Markdown To add <!-- more -->

3.2.2 How to add multiple tags to an article

There are two multi label formats

tags: [a, b, c]

or

tags:
  - a
  - b
  - c

Replace themes\indigo\source\img\brand.jpg, Keep the original file name unchanged .

3.2.4 How to use icons in articles

Come first fontawesome Find the icon name you need , such as :book, Use in the following format :

<i class="icon icon-book"></i>

Icon style prefixes are icon, Besides, there are 5 Icon sizing classes and 1 Space classes .

<!-- 1.3 Multiple size  -->
<i class="icon icon-book icon-lg"></i>
<!-- 2 Multiple size  -->
<i class="icon icon-book icon-2x"></i>
<!-- 3 Multiple size  -->
<i class="icon icon-book icon-3x"></i>
<!-- 4 Multiple size  -->
<i class="icon icon-book icon-4x"></i>
<!-- 5 Multiple size  -->
<i class="icon icon-book icon-5x"></i>
<!-- 5px The right margin  -->
<i class="icon icon-book icon-pr"></i>
<!-- 5px The left margin  -->
<i class="icon icon-book icon-pl"></i>

3.2.5 Individual icons cannot be displayed

If your browser has ADBlock, It will shield SNS Related content , such as :Github.

terms of settlement : Configurable ADBlock Not running on your site .

3.2.6 There is no style after generating the site

install less

3.2.7 Self modification of the style line does not take effect

Because the topic references by default cdn style , Only when the theme is updated ,cdn The style in will change . If you want to use your own style , You need to modify the configuration of cdn: false. So it's not quoting cdn resources , Using local resources .

3.2.8 The site doesn't work after changing the style

After confirming the non cache problem , perform hexo clean Then generate and upload .

It is recommended to execute once every submission hexo clean, You can create one in the project directory shell Script , Carry out orders hexo clean && hexo generate --deploy, After running, it can ensure that every modification can take effect .

3.2.9 Change the color of the site

edit themes\indigo\source\css_partial\variable.less, Change the corresponding color variable .

Color reference :Material Design Color Palette Generator

Be careful : When using custom color matching, you need to set the cdn close ,cdn: false.

3.2.10 add to 404 page

stay hexo/source New in directory 404.html.

Set metadata information , If you don't want to apply the theme layout, you can set layout by false.

layout: false    
title: "My Blog Name | 404"
---

3.2.11 Use... In blogs Emoji

Reference resources Can i use emoji in mypage?

3.3 Custom page

The theme Card Branches provide customized module support for custom pages , Here is a brief introduction to .

3.3.1 Create a custom page

hexo new page pageName

After executing the order, it will be in your Hexo root directory source/ Create a directory with the one you just entered pageName The same folder , There's only one in it index.md.

3.3.2 Configuration page

layout: page      #  must 
title: pageTitle  #  must , Page name 
description:  User defined page function demonstration        #  Page secondary title , Descriptive text 
comments: false     #  Disable comments , Optional , Default on 
reward: false       #  No reward , Optional , Default on 
----

3.3.3 Module and content input

Custom page ,imageblockquotepre Etc. will be given a special style . Besides , Provides @moduleName{ ... } Format tags are used for package content , Give style to .

版权声明
本文为[coder-ice]所创,转载请带上原文链接,感谢

Scroll to Top