Icework + GH-Pages fast deployment of multiple template pages

Project address: github.com/yhyddr/land… Address: yhyddr. Making. IO/landingpage

preface

  • GitHub account with its Pages service

You don’t need anything prepared. A server? Domain name? Front end engineer? None! You just need to have the fun of building your own website.

  • Fly ice

Now with Flyice, it also lets you generate your favorite pages with one click: Most importantly, your React App allows you to improve your site while learning the front end. Real-time hot update to view their own editing results. One-click deployment to a website for everyone to visit, you deserve it.

About fly ice

Simple and friendly front-end development system

features

  • Visual development: simplify front-end engineering complexity through GUI operation, while access to different projects through adapters for visual management, customized proprietary front-end workbench
  • Abundant materials: Improve the efficiency of project development based on material assembly, and provide abundant React/Vue materials
  • Best practices: Project development best practices derived from extensive experience, including directory results, development debugging, routing configuration, state management, etc
  • Custom materials: Use materials developer tools to quickly develop and build private materials systems

In addition, I think the correct use of flying ice should be the use of enterprises to build their own material warehouse.

About making Pages

Websites for you and your projects.

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Very convenient website hosting, built directly using your GitHub project library.

Install the fly ice

First install the flying ice

# Install tools
$ npm install iceworks -g
# start workbench
$ iceworks
Copy the code

Create a project

Here we choose to start from the recommended template:

  • Choose a template you like for rapid deployment

  • Create a new folder or select an existing empty folder (avoid overwriting existing files).
  • Give the project a project name for subsequent identification.

Do something

Feel free to take a look at the console’s options and tinker with them. We’ll focus on how deployment works here, so skip ahead.

The deployment of

Github

Create a new GitHub project repository.

project

Open the directory you just created, locate the package.json file, and add the following three items

homepage



yhyddr/landingpage



https://{{yourGithubName}}.github.io/{{yourProjectName}}

predeploy & deploy

Add these two lines to scripts

"predeploy": "npm run build"."deploy": "gh-pages -d build"
Copy the code

Terminal command

Open the terminal where the project resides and do the following

Push to the remote repository to store the code

Be sure to use your own warehouse name instead

git init
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:{yourName}/{yourProjectName}.git
git push -u origin master
Copy the code

Install the gh – pages

npm install gh-pages --save-dev
Copy the code

Push the page build file

npm run deploy
Copy the code

Later, if there are local changes, you can use this command directly to update your page.

The last

Go to the GitHub Setting page






Custom domain name

If you have your own domain, you can even set it up here


Effect of summary

Easy to have a website of your own

At the same time, just need to open the editor can be very fast customization. There are plenty of components to choose from to help you build your own site.

What are you waiting for?! Build your website like a front-end engineer. Also one button deployment oh.

reference

Monsoir. Making. IO/Notes/React… Ice. Work/docs/guide /… Pages.github.com/ operator work/docs/guide /…