GitHubPages + Hexo – detailed blog build

Give yourself a record of knowledge and time space –> personal Blog detailed build

Every good programmer (,) have a lot of personal experience and insights in the growth process, the sentiment to let him go, but usually the personal blog is such a record of personal growth place. Ta, give you the opportunity to share growth;

Personal blog benefits

  • Freedom: the content of the article, format, layout can be in their own control, do not accept the limitations of other blog platform;
  • Personality: learn to create their own brand, to share their views on the same thing;

It is a very interesting thing to have such an independent and free space.

GitHubPages + Hexo - detailed blog build
blog effect.Gif

Build a personal blog, go up


Personal blog program
  • I chose the GitHubPages + Hexo + Next, a simple and efficient way to achieve, of course, there are other ways to achieve, such as: WordPress, GitHubPages + Jekyll.

Follow me, it’s easy for you to have your own blog in a few minutes. Try it!

1 create GitHub warehouse


  • First you need to have a GitHub account login, registration or GitHub
  • Create warehouse:
    GitHubPages + Hexo - detailed blog build
    to create warehouse 1.png
  • Fill in the warehouse Name:
    GitHubPages + Hexo - detailed blog build
    warehouse name 2.png
    note: Respository name must enter: your user name.Github.io. (user name is the name of the warehouse will be used below) other places do not have to modify, and then click the Create repository button to complete the creation can be.

2 preparation of local environment


I use the Mac system, mainly to explain the operation of Mac;

Git installation
  • Git has to help you download it, just go to the Baidu cloud to download a installation can also go to the official website of Git download;
  • Installation: double click the DMG file to install.
Nodejs installation
  • The two way: one of the Baidu cloud to download a direct installation; the second to download the official website of Nodejs.
  • Nodejs can also use the Nodejs version of the installation manager NVM, consider the installation process, there are many problems, the operation process is more, I do not recommend that you use this installation.
Hexo installation

Hexo is to build the protagonist, first open the official website Hexo.

  • Open the terminal, enter the Hexo installation command: NPM install hexo-cli -g
  • If the command is not installed successfully,
    GitHubPages + Hexo - detailed blog build
    Hexo error installation error.Png
    solution: input the following commands and password to complete the installation of sudo NPM install –unsafe-perm –verbose: -g hero
Local blog warehouse
  • Do you want to create in your local store blog folder, open a terminal location to store the blog directory, as follows: GitHubPages + Hexo - detailed blog build

    blog directory to the storage location of.Png

  • Execute Hexo commands, initialize the local blog: hexo init warehouse.Github.io user name / / as far as possible and created above Github in the warehouse using the same name (I in this pit again, recommend the use of the same name)
Blog Preview
  • After the completion of the above steps, the basic framework of the blog has been set up, Hexo installed after the completion of the default landscape theme;
  • In the terminal to locate the xxx.github.io folder, and enter the following command in the terminal will be able to start the service hexo s –debug preview function; # start service
    start.Png service GitHubPages + Hexo - detailed blog build preview Preview
  • Enter the URL in the browser: http://localhost:4000/, you can preview the blog under the theme of the landscape effect, specifically as follows:
    GitHubPages + Hexo - detailed blog build
    default landscape effect.Png

Then come…

3 Next theme installation


  • The Next theme is a Hexo theme created by iissnan, based on simplicity;
  • Installation: in the terminal location to the xxx.github.io directory, execute the following command, wait a moment, the theme is downloaded to the corresponding position; CD xxx.github.io git clone https://github.com/iissnan/hexo-theme-next themes/next GitHubPages + Hexo - detailed blog build
    theme directory.Png Download
[Next theme blog site configuration]

First of all, a copy of the blog to open a local directory of the _config.yml file, as a backup in case of error correction

  • Site: open the configuration file before the xxx.github.io folder, find _config.yml is the configuration file for the site, select the -&gt file; right click open -> -> text editor (can also choose Sublime open), opens to modify the basic configuration of the blog; (Note: in the configuration file is “#” annotation, equivalent to the C language in
    GitHubPages + Hexo - detailed blog build
    ) “/” Next site configuration.Png

Note: you must add spaces between the key values in the configuration file.

For more information about Hexo configuration, please go to Hexo’s official documentation (Simplified Chinese).

Site configuration file detailed configuration example
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html Source: https://github.com/hexojs/hexo/ Site title: XXX ## # # blog name, also known as the site name subtitle: XXX description: XXX # # subtitle description on the site, the search engine will crawl, you can customize author: XXX name language: zh-Hans # author # Chinese timezone: # language simplified by default can be # URL # this temporarily need to configure the binding domain, to create the sitemap.xml when the If your configuration ## site is put in a subdirectory, set URL as'http://yoursite.com/child'and root as'/child/' url: http://yoursite.com root: / permalink:: year/: month/: day/: title/ permalink_defaults: Directory # # directory, source_dir: source public_dir: public tag_d do not change Ir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: Lang skip_render: Writing # #: definition of the layout, writing format, modify a new_post_name:: title.md File of new posts # name default_layout: post titlecase: false Transform title into titlecase external_link: true # # Open external links in new tab filename_case: false post_asset_folder: false relative_link: 0 render_drafts: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: Category & Tag #; default_category: Uncategorized category_map: tag_map: Date Time format # # / date / time format, do not modify the Hexo Moment.js to parse ## uses and display date You can customize the date form ## At as defined in http://momentjs.com/docs/#/displaying/format/ date_format: MMM D YYYY time_format: ## H:mm:ss # Pagination # page shows the number of articles, you can customize the ## Set per_page to themes and plugins for to disable 0 pagination per_page: 10 pagination_dir: page Extensions # # site configuration, here will be the default theme annotation, modify next Plugins: https://hexo.io/plugins/ Themes: ## ## https://hexo.io/themes/ theme: next #theme: landscape # Deployment # local blog deployed to GitHub to configure the Docs: HTTPS://hexo.io/docs/deployment.html deploy: ## here type: git #git repo: https://github.com/CustomPBWaters/CustomPBWaters.github.io.git # submitted the created Github warehouse

Prompt: configure the site configuration file, you can preview the effect of the blog, the steps are as follows:
to the xxx.github.io folder in the terminal location, in the terminal and enter the following command to start the service preview function;

Hexo s --debug # start service Preview

Start the success can see tips, follow the prompts to use the browser to open the URL, you can see your local blog, there is a Hello World

GitHubPages + Hexo - detailed blog build
s –debug command success tips.Png hexo

After reading the results continue to learn the following…

[blog Next theme configuration]
  • Theme: the old rules configuration file in the xxx.github.io/themes/next/_config.yml directory, first, a backup in case of error correction, of course, is the most authoritative official documentation, I offer an example here, for your reference;
  • Reminder: you can /next/_config.yml, copy the following keys, find the corresponding value changes, enter —> convenient; no changes a after you can preview the effect of hexo s –debug
    GitHubPages + Hexo - detailed blog build
    .Png modified key theme
  • On the topic of options slightly more, so take the form of explanation, as follows:
    1 Sidebar Avatar set the head # # note: is the path to avatar: under the xxx.github.io/source /uploads/images/avatar.jpg # began to modify the head reminder: if there is no uploads folder source folder, then a new. Consider the use of a lot of pictures to the blog in the uploads folder, please good, avoid confusion;
    GitHubPages + Hexo - detailed blog build
    uploads.Png 2 set the keyword classification for the picture # Set default keywords (Use a comma to separate keywords: iOS), white boiling water, # modify key programmer “3 set the start time of the # Specify blog the date when the site was setup #since: 2016 # blog set the start time of the 4 menu bar set # ————————————————————— # Menu Settings # menu bar set # ————————————————————— # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives menu: HO) Me: / # on the menu display page archives: /archives # all displayed in the menu (archive) categories: /categories # displayed on the menu tags: /tags # display on the menu label #search: /search about: /about # # search on the menu display on the #sitemap: sitemap.xml / #commonweal: /404.html 5 menu bar icon set: from Font Awesome (simplified Chinese) website name corresponding to the corresponding icon in the menu item to # menu bar icon set rules: menu (left): icon name (right) menu_icons: enable: true home: home archives: archive # home # (archive) categories: th all tags: tags # # classification label #search: search about: user # # Search about # schedule: calendar sitemap: sit # # schedule EMAP commonweal: heartbeat # # site map # # KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome # public key is mapped to the menu key 6 blog set up the appearance of Schemes #scheme: Muse # # default Scheme, NexT this is the first version, black and white tone, a lot of space scheme: #Muse compact Mist version, clean and orderly appearance of single column #scheme: Pisces # double column Scheme 7 set the social links (set Github, micro-blog Social Links Key # #) is the link label showing to end users. Value is the target link # (E.g. GitHub: https:// github.com/iissnan) # set social links (such as: Github, micro-blog), here must be empty two # LinkLabel: Link GitHub: https://github.com/CustomPBWaters social: Weibo: http://weibo.com/JacklinIOS/profile rightmod=1&a? Mp; wvr=6& mod=personinfo JianShu: Social Links Icons # # # set the corresponding social links icon social_icons: enable: true Icon Mappings. KeyMapsToSocalItemKey: # # NameOfTheIconFromFontAwesome GitHub: GitHub Twitter: twitter Weibo: Weibo #JianShu: heartbeat Blogrolls # # set Links links_title: Links #links_layout: block #links_layout: inline links: #Title: http://example.com/ white boiling water Jane books: http://www.jianshu.com/users/fd745d76c816/latest_articles 8 set the sidebar (set direction into the left sidebar) # set the direction (set to left) sidebar: # Sidebar Position, available value: left right | code highlighting position: left #position: right 9 Code Highlight # set blog showed theme Available value # #: normal night night eighties | | | night blue night bright https://github.com/chriskempson/tomorrow-theme | # # code highlighting theme highlight_theme: normal 10 WeChat Alipay # reward allocation # appreciation function reward text reward_comment: adhere to the original technology sharing, your support will encourage me to continue writing! WeChat public number # WeChat wechatpay: Alipay /uploads/money/wechat-reward-image.jpg # collection of two-dimensional code collection of two-dimensional code /uploads/money/alipay-reward-image.jpg 9 alipay: set the WeChat public subscription # set WeChat public to subscribe to the #wechat_subscriber: enabled: true qcode: /uploads/ money/alipay-reward-image.jpg description: welcome you to sweep the above, subscribe to the blog! 10 add “counter – not # add garlic garlic” counter – not # Show PV/UV of the website/page with busuanzi. Get more information on http://ibruce.info/2015/04/04/busuanzi/ busuanzi_count: # # count values only if the other configs are false enable: true custom span for the # UV whole site site_uv: true site_uv_header: < I class= “Fa fa-user &gt”; < /i> # the total number of visits site_uv_footer: custom span for the # PV whole site site_pv: true site_pv_header: &lt I “Fa fa-eye”; class= & gt; < /i> # the total traffic to site_pv_footer: custom span for one # PV page only page_pv: true page_pv_header: &lt I class= FA fa-eye “; > < /i> the amount of reading # page_pv_footer: 11 set whether to display the full reading The Automatically Excerpt. Not recommend. # # Please use < more –&gt in the! – post to control; excerpt accurately.auto_excerpt: enable: true # set whether to display the full text, the more words, it is necessary to set up a true length: 20012 Make duoshuo # add comments show UA user_id must NOT be null when # admin_enable is true! You can visit http://dev.duoshuo.com get # duoshuo user ID. duoshuo_info: ua_enable: # add comments true admin_enable: false user_id: 636315412521078100 admin_nickname: custompbwaters 13 logo
    favicon set up a website through the website online making favicon pictures, the best logo set 32*32.
    next theme: picture on the next source/images theme directory # add themes in next configuration file: favicon: /uploads/images/favicon.png 13 site head into border-radius: 50% round
    .Site-author-image increase in themes/next/source/css/_common/components/sidebar/ defined in sidebar-author.styl; -webkit-border-radius: 50%; -moz-border-radius: 50%; 14 to join the site content search function
    this site is Local Search. Join the site content search steps are as follows:
    : hexo-generator-searchdb NPM install hexo-generator-searchdb to install –save to add the search field, in the XXX.github.io/_config.yml of the site are as follows: # site search: path: search.xml field: content search function post format: HTML limit: 1000015 next
    1 theme add a background picture to find a background image on the hexo (hexo -&gt themes -&gt project file); next; -> source -> Bgimage (stored background picture file path);
    GitHubPages + Hexo - detailed blog build
    .Png add a background picture

16 the bottom of the logo column to change the
to find the /themes/next/layout/_partials/ below the footer.swig file, open will find, as shown in the following statement:

GitHubPages + Hexo - detailed blog build
bottom logo bar change.Png
  • The first box is below the “date of every XXX”
  • The second box, which is the Hexo driven by the Hexo link
  • The third box is “theme -Next.XX”
GitHubPages + Hexo - detailed blog build
modified bottom Chinese.Png

Create classification interface

Look at the effect:

GitHubPages + Hexo - detailed blog build
classification can be multi-level.Png
  • Open the terminal, located in the xxx.github.io directory;
  • Execute the following command to create a new page named categories; hexo new page categories
  • After creation, find the index.md file in the corresponding directory, make the following changes: – title: categories # classification name (null) date: 2016-06-15 08:17:00 type: “categories” # page type is set to categories, the theme for this page will automatically display all comments: false # if enabled more or Disqus comments, the default page will be a comment. If you need to close, set to false —

Create tag interface

First look:

GitHubPages + Hexo - detailed blog build
tag.Png
  • Open the terminal, located in the xxx.github.io directory;
  • Execute the following command to create a new page named tags; hexo new page tags
  • After creation, find the index.md file in the corresponding directory, make the following changes: – title: tags # label name (null) date: 2016-08-20 22:17:49 type: “tags” # page type is set to tags, this page will automatically display the theme for comments: false tag cloud # if enabled more or Disqus comments, the default page will be a comment. If you need to close, set to false —
Attention points
  • Format: once again, the key must be set between the space must have a blank
    GitHubPages + Hexo - detailed blog build
    like this in front of the empty two grid.Png
  • On the third party service “duoshuo_info”
    in the configuration of the item, the value of the corresponding user_id keys do not change, that is, to maintain the 0, the specific reasons I do not know;
  • Classification and tag cloud page
    first, to use the “hexo new page” command to generate these two pages, or report 404. Secondly, the two pages is the theme of automatic maintenance, as long as we follow the rules of the article on the line;

Blogging and publishing

After the above steps, the local blog and theme settings have been completed, then the next is to write a blog;

Reminder: your blog files need to be stored in the xxx.github.io/source/_posts folder in the folder you can follow your blog to establish a series of folders to the original file management blog;

GitHubPages + Hexo - detailed blog build
local blog directory.Png
Operation steps

1 use Markdown to write the article
no matter what you use to edit the Markdown file, the last generated MD file into the xxx.github.io/source/_posts folder or its subfolders, such as:

- title: personal blog build Xiangjie (Universal edition Windows and Mac #) this is the title of date: 2016-05-20 this time 11:26:00 # is this article ^_^. can customize the creation time. Categories: # written here will converge to the categories page automatic classification, multi - classification can build a classification # blog - Next # theme configuration two class tags: # here to write tags automatically from the tags page on the blog to build # configurable multiple tags, note the format - Next - Theme configuration

Reminder

Classification and labeling is automatically maintained, the key is to write the article in accordance with the provisions of the format, as above, you can refer to. Next theme will automatically generate a directory, which saves a lot of things;

2 in the local test
on the terminal to the xxx.github.io directory, enter the command:

Hexo s --debug

3 browser view effect
in the browser to enter http://localhost:4000/ to see the effect of the blog

4 install automatic deployment publishing tools

Sudo NPM install hexo-deployer-git --save

5 GitHubPages
when released to the local blog confirmed effect, can generate static pages uploaded to the GithubPages MD file in the xxx.github.io directory to the terminal location, execute the following commands:

Hexo clean # "to clear the cache under normal circumstances can ignore this command hexo g hexo D # # generating static pages can also be executed hexo started to deploy clean & & hexo; G & & hexo; D

Warm tip
if it is the first deployment, the terminal will be prompted to enter the user name and password. After the completion of the command, a few minutes to open the http://xxx.github.io to see your personal blog. After the release of a new article, the above command can be executed;

Concern point

The use of hexo, if the computer how to update the blog?
this is an issue that everybody cares, know a more detailed answer on the
:
method; a new computer configured in the local blog environment, then, the original copy directly on the computer xxx.github.io to the new folder on the computer to
two:
HEXO+GitHub, build a blog – backup

Hexo commonly used command notes


  • Hexo NPM install hexo -g to install the upgrade installation of NPM update hexo -g # # upgrade hexo init # initialization
  • The commonly used hexo n – “my blog” hexo new = “my blog” # new article hexo P publish hexo g hexo hexo = = = = = = hexo server s generate# hexo hexo D # start service preview = = hexo deploy# deployment
  • Start hexo server #Hexo # local service monitors file changes and automatically update, you need to restart the server. Hexo server -s hexo server -p # static mode 5000 hexo server -i 192.168.1.1 # change port # custom IP
  • Hexo generate # monitoring file changes using Hexo to generate static file fast and simple hexo generate –watch hexo clean # # monitoring file changes “to clear the cache under normal circumstances can ignore this section.
  • The deployment of # two command function is the same as hexo generate –deploy hexo deploy –generate hexo deploy -g hexo server -g
  • The draft # new draft hexo title> new draft < post hexo publish # released draft for draft < title>
  • The template hexo new “postName” hexo new page # new article “pageName” # new page hexo generate # generate static pages to the public directory hexo server # preview open access port (default port 4000,’ctrl + C’server hexo deploy # closed).Deploy directory will be deployed to the GitHub hexo new [layout] < title&gt hexo; new photo “My Gallery” hexo “new Hello World” –lang tw
  • The writing time of variable description: Title Title: year a year (4 digits): month month (2 digits): i_month month (removed at the beginning of the establishment of the date zero): Day (2 digits): i_day (remove the date at the beginning of the zero)

GitHubPages + + + Hexo – optimized blog settings “continuous update”

expect


  • If you encounter error in the process of reading, I hope you can Issues me, thank you.
  • If you want to share something with this article, I hope you can Issues me, I would like to add more practical content for this article, thank you.
  • “The original blog”, I will continue to update, [not timing, learning experience and practical articles, is the hard truth ^_^.]

Subsequent [follow-up]


I also spent time on the [
] a summary of the study summary –> GitHub (now code less, good summary to be uploaded), white boiling water ln-Blog, white ln-, white boiling water boiling water of a Book ln- WeChat public number
for –>

I’m just a thought code Porter plus my own study summary.

If you like or help, can you order a Star