How to quickly build their own Github – Pages personal blog

I believe that everyone has ever thought of doing a blog website of their own, upload a few of their own blog posts, works and so on, especially technology developers, more want to have a small world belonging to their own. But in the past, the project of building blog website usually needs to buy cloud server, buy domain name and so on, very troublesome. For the demand is not high, just want to build a static website for people, those programs are too cumbersome and no time to maintain.

The solution recommended in this article is to create your own Github static website based on Github. The process is very simple, you only need to apply for a Github account (believe that developers generally will have, if not, directly go to Github.com to register one).

Set up github Pages personal website, mainly divided into the following steps:

1. Have a Github account, understand the basic operation of Github and the concept of Git branch

Developers should not strange to this section, if you don’t know much, can refer to the article quickly understand making basic information: www.jianshu.com/p/f82c76b90…

2. Register and apply for gitlab. IO warehouse

Github. IO. For example, my github account is Liusq-Cindy and my github account is Liusq-Cindy.github. It will automatically be used as a repository for your Github Pages repository (see how to create a Github Repository).

This part will not be repeated, the official website said very clear, can refer to: github pages official website

Therefore, in fact, your personal website has been set up, the address should be like: liusq- Cindy.github. IO, this website carries the resources you upload on github page. At this point the page should only have a Hello Word, so let’s try to create a simple page structure.

3. Basic Web framework — Jelly Templates

Now that you have a repository and a corresponding blog address, all you need to do is copy the files you need into your repository. If you need to quickly build a basic blog site, Gihub provides a blog generation tool called Jekyll. In addition, many people use Hexo blog framework to generate blogs, both of which support Markdown and can be deployed with one click, etc. Great for people who need to build blogs quickly or for non-technical developers, there are many templates and themes to use, which can save a lot of time.

For the use of the above tools, please refer directly to the official documentation, which is very detailed. If you are a technical developer, know HTML/CSS /javascript, Git and packaging, you can also build your own website manually.

The following describes how to manually build an application based on Vue

4. Build github- Pages personal website based on VUE

As front-end developers, the development of VUE should be very familiar, but in the process of building github-Pages personal website, or encountered some problems, the overall process and the solution to the problem will be summarized as follows:

1. First, create an empty VUE application in the repository

Creating a VUE-CLI application can be created directly from the command line, or one can be forked from an existing empty VUE repository

// After installing node, webpack, vue-CLI globallyVue create Project name// Then enter as prompted
Copy the code

2. The second step is to process md files

If you want to upload a blog post on your personal website and ensure the beautification of its format, you must support Markdown, otherwise the efficiency of handwritten tags is too low. There are a lot of solutions on the web for [vue parsing MD files], but most of them have some bugs (such as code can not highlight, etc.). The following is a practical solution to handle MD files:

(1) Install the following NPM dependencies:

Markdown plugin – Parses md files

npm i vue-markdown-loader@0 -D
Copy the code

Markdown style sheet — The corresponding Markdown is converted to HTML style

npm install --save github-markdown-css
Copy the code

Code highlighting and line number dependencies — Handles code highlighting and line number

npm install --save highlightjs-line-numbers.js
Copy the code

(2) Modify the basic webPack configuration

In build/webpack.base.config.js, module: {rules: []} add:

{
      test: /\.md$/,
      loader: 'vue-markdown-loader'.options: {
        preprocess: function (MarkdownIt, Source) {
          MarkdownIt.renderer.rules.table_open = function () {
            return '<div class="table-container"><table class="table">';
          };
          MarkdownIt.renderer.rules.table_close = function () {
            return '</table></div>';
          };
          returnSource; }}}Copy the code

Md file is parsed by vue-markdown-loader plug-in.

(3) Introduce the github markdown-CSS style plugin and highlight plugin in the home page component of the page that needs to introduce md file. It can be app. vue, in this case, it is index.vue under SRC /components/posts

import 'highlight.js/styles/github.css'
import 'github-markdown-css'
Copy the code

Note: Add class=”markdown-body” to the component that needs to match the style to match the style sheet

(4) The srcipt file and CSS styles are introduced in the index. HTML file under the root directory, and the highlightjs-line-number.js style needs to be manually adjusted. The contents of the index. HTML file are as follows:

<! DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>liusq</title>
    <link
      href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css"
      rel="stylesheet"
    />
    <script src="/ / cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>
    <script src="/ / cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
    <script>
      hljs.initLineNumbersOnLoad();
    </script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
<style>
  .hljs-line-numbers {
    text-align: right;
    border-right: 1px solid #ccc ! important;
    margin-right: 10px ! important;
    padding-right: 5px ! important;
    color: # 999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>
Copy the code

(5) Finally, the page introduces the MD file as follows:

<template>
  <div class="hello markdown-body">
    <Readme></Readme>
  </div>
</template>

<script>

import 'highlight.js/styles/github.css'
import 'github-markdown-css'
import Readme from './test.md'// Import the MD file

export default {
  name: 'HelloWorld'.components: {
    Readme
  }
}
</script>
Copy the code

Flexibility to move component locations and introduce Markdown styles as needed.

Vue parses and displays markdown files.

Step 3: Package the Vue file

Note that for github-Pages personal blog, the files uploaded by the repository cannot be directly uploaded to the vue project, but need to be packaged and compiled.

Generally, for VUE projects, NPM run build is used for packaging, webpack will package the project, the packaging file will be generated in the dist directory, the dist directory content uploaded to github-Pages repository corresponding to the master branch, but packaging may also encounter some problems.

Failed to load project resources after packaging? Click on index.html whitespace

In this case, you can open the console to see if there are no CSS and JS files loaded in index.html. If so, it is probably because the path configuration in config has not been changed, so the file cannot be loaded. Open the index.js file under the project root directory config and modify it as follows:

AssetsPublicPath: ‘/’ changed to assetsPublicPath: ‘./’

For font ICONS that cannot be loaded, modify the build/utils.js file and modify publicPath: “.. /.. /”

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '.. /.. / '.fallback: 'vue-style-loader'})}else {
      return ['vue-style-loader'].concat(loaders)
    }
Copy the code

Save and repackage.

[Reference article: Vue packaging]

4. The fourth step is multi-branch management

Since Github-Pages loads code on master by default, the code on Master needs to be the contents of the packaged Dist file, so for daily development purposes, we need another branch to store all the code. (It is said that gh-Pages can be set as the loading branch of the warehouse, but I did not find the modification of the source setting in the new version of github official website. If anyone knows, please contact me as soon as possible.)

Git subtree push –prefix docpath Origin branch git subtree push –prefix docpath Origin branch

git subtree push --prefix dist origin master
Copy the code

Thus, there are two branches, master for packaged content and GH-Pages for all code.

The subsequent optimization and expansion of the website are the same as other VUE projects, which will not be described here