Use Github Pages to quickly deploy your static web pages

Making Pages website

Github Pages: Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

preface

In our daily work, we often come across situations where we have to do demos. Demo is different from project development, we need fast and easy development and deployment, not a complete development process.

The following figure is definitely not the flow we want for a demo.

Especially for data visualization work, it is very important to be able to quickly create a demo to verify your ideas and easily share your work with your peers. Github Pages is a method I often use to do demos.

Reasons for choosing Github Pages

  1. Zero cost to use: Github Pages is integrated in Github, tied directly to code management, and automatically redeployed as code updates, making it easy to use.
  2. Free: free to provide username. Github. IO domain name, free static web server.
  3. Unlimited number: There is no limit to how many Github Pages can use, and each Github Repository can be deployed as a static site.

Method of use

Deploy static web pages

First, let’s look at deploying the most basic static web page. The end result is a Hello, github pages 🙂 page.

Demo: Github Repository

Making page address: ssthouse. Making. IO/lot – page…

1.1 Create a Github project

Go to Github and click On New Repository to create a New project. Enter the basic project information and click Create Repository to confirm.

After confirmation, you will see the following page:

1.2 Enable the Github Page option for Repository

As shown, we select The Setting TAB

Scroll down to the Github Pages option, change Source to Master Branch, and click the Save button

Finally, we get a link that will take us to the project’s Github Pages page.

1.3 Code clone to local, and create a few basic files

1.4 Adding basic code

Note that HTML is in the same directory as CSS and JS, so we refer to it in a relative path.

The logic is simple: add Hello, github pages 🙂 to the page after it has loaded.

index.html


      
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Github Page demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="index.js"></script>
</head>
<body>
    <div id="main-content">

    </div>
</body>
</html>
Copy the code

index.js

window.onload = function() {
  document.getElementById('main-content').innerHTML = 'Hello, github pages :)'
}
Copy the code

main.css

#main-content {
  font-size: 36px;
  font-weight: bold;
  padding: 16px;
}
Copy the code

1.5 Update code to github repository

    cd github-pages-demo
    git add .
    git commit -m "Add simple code"
    git push
Copy the code

1.6 See the effect

Now we can access the URL we got when we turned on the Github Pages option

Note: After the code push goes up, it may take several minutes to deploy and take effect

It looks like this :arrow_down:

How to use Github Pages when using front-end frameworks

Nowadays, when we create a front-end project, we rarely manually create index.html, main.js, and main.css files. We usually choose a front-end framework and use the corresponding Command Line tool to initialize the project.

Here I use Vue’s Webpack project as an introduction, rect and Angular do a similar configuration.

Create a project

First we use vuE-CLI to create a WebPack-managed VUE project (click I install VUe-CLI).

vue init webpack github-page-vue-demo
Copy the code

Then we go into the project and look at the directory structure:

You can see there are three files in the config directory:

Config / / configuration directory ├ ─ ─ dev. The env. Js / / used in the development mode of environment variables ├ ─ ─ index. The js / / used to configure ` dev ` mode and ` prod webpack ` mode config file └ ─ ─ Prod.env.js // Environment variables for the product schemaCopy the code

Here we need to configure the index.js file, first look at the contents of the file. The build property of module.exports, where we will configure the path to the generated file when webpack builds

module.exports = {
  dev: {... },build: {
    // Template for index.html
    index: path.resolve(__dirname, '.. /dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '.. /dist'),
    assetsSubDirectory: 'static'.assetsPublicPath: '/'. }}Copy the code

You can see that the paths of index files and assets files are configured in the figure. After executing yarn Run build by default, WebPack packs the project into the./dist folder in the project root directory, as shown in the following figure:

Modifying the compile configuration

Github Pages only recognizes index files in the root directory of the project by default. What if we want github Pages to recognize our build files?

You might think of copying the files generated by the build in the Dist folder directly to the root of your project, which is a good idea. However, every time we build, we need to manually copy one file, which adds a lot of repetitive work.

We can modify the default configuration to generate the project build file directly to the project root directory, like this:

module.exports = {
  dev: {... },build: {
    // Template for index.html
    index: path.resolve(__dirname, '.. /index.html'),  // Before is '.. /dist/index.html'

    // Paths
    assetsRoot: path.resolve(__dirname, '.. / '),  // Before is '.. /dist'
    assetsSubDirectory: 'static'.assetsPublicPath: '/'.// before '/'. }}Copy the code

The changes were to remove the default dist directory and change the reference path of assets from absolute to relative.

The dist directory was removed to change the build target path to the project root directory. Changed to a relative path is because in the deployment to making pages, our domain name is https://username.github.io/repositoryName, that is to say, our project is deployed on a subdomain, Using an absolute path results in assets 404.

After this modification, we found another problem: In this configuration, the index.html file generated by build overwrites the template index.html file, and there is a static folder in the root directory, which can be confusing. Is there a better solution?

Let’s go back to the Github Page setting:

You can see that there is an option called the Master Branch/Docs Folder. The current state is not optional because there is no /docs directory in our project code.

This option means that github Page can identify the Docs folder in our project and look for index files in that folder to deploy. After selecting this option, we just need to change the webPack default dist folder to Docs folder and configure it as follows:

module.exports = {
  dev: {... },build: {
    // Template for index.html
    index: path.resolve(__dirname, '.. /docs/index.html'),  // Before is '.. /dist/index.html'

    // Paths
    assetsRoot: path.resolve(__dirname, '.. /docs'),  // Before is '.. /dist'
    assetsSubDirectory: 'static'.assetsPublicPath: '/'.// before '/'. }}Copy the code

After making the above changes, run YARN Run Build again and you will find a docs folder in the root directory containing the index file and the static folder. We will add the docs directory and all files under it to Git version management and push it to Github.

Go to the Github Page setting page of the project again and the Master Branch/Docs Folder becomes selectable. We select this option and save the Settings.

After about two minutes, we will revisit our project’s Github Page URL and see that the project has been successfully deployed :tada:

The custom template

In the previous step, we configured a project configuration ourselves based on Vue + Webpack. But if we had to change the configuration every time we wanted to create a demo, it would still take time. Especially if you forget the configuration steps, you have to look up the previous configuration method.

A better solution is to create a basic Template Repository, fork it out the next time you need to create a demo project and start developing based on it.

For example, the stack I often use is Vue + d3. js + Webpack. I created a template for myself and configured the Github page. The next time you want to do a data visualization demo, fork the repository directly and save a lot of time to configure the project. If you have a friend with similar technology stack, you can try it:

Vue + d3. js + Webpack (Github page ready) Github address

Can it only be a static website?

Github Page makes it easy to deploy static web pages. But because there is no database, there is no way to store data, and there is no way to achieve more complex business logic. But is github Page really just a simple static site?

In fact, the front end can be developed and deployed separately as long as there are back-end apis.

If we already have a back-end API on our site, we can implement all the business logic using github Page and javascript calling the back-end API.

If you don’t have an existing back-end API, but want to implement simple back-end logic, here’s a tip that I often use:

Use leanCloud as the back-end database of the object storage to invoke the LeanCloud API to implement all the business logic

If you’re interested, check out my project: Github Visualization

The project is a user access log that is deployed on Github Pages and implemented using the LeanCloud API. For details about how to use LeanCloud, see the LeanCloud documentation

The last

Github Pages saved me a lot of time and provided a lot of convenience for me to develop demo presentations. Recommend not to use small partners try, I believe will bring you a lot of convenience.

If you think this article is good, you might want to pay attention to it:)

Making the home page

Zhihu column

The Denver nuggets

Welcome to follow my official account: