During the learning process, are there any pain points: want to use popular technologies to develop personal Web projects, but are intimidated by the cumbersome configuration of WebPack; Hope to have an online project address, but the purchase of cloud host cost money and time; Or the documents prepared by the third party are not beautiful enough. We hope to have an online document address to record the accumulation of technology with a more elegant and comfortable style

If you have any of the above questions, this article is a good solution for you:

  • Use Parcel packaging to build Web pages (Parcel is almost zero-configuration and can use popular offline technology)
  • Document using Docsify (document style is more elegant, example)
  • Use Firebase to host our pages (free HTTPS static file hosting service)

With all three tools, you can do it with just a few commands: package your own Web application, document it, and have your own online address that’s completely free

Use version 8.x for Node

Free Hosting of Web pages with Firebase (wall climbing required)

To use Firebase, first sign up for a Google account

Step 1: Install Firebase-tools globally

npm install -g firebase-tools
Copy the code

Step 2: If you use Firebase for the first time, you need to authorize the login. If you have authorized the login, skip this step

firebase login
Copy the code

Note: If an error occurs in Windows, use CMD instead of Git bash

Open the Firebase Console and click Add Project

Step 4: Enter the project name and write down the project ID as shown in the picture below

Create a new folder named test-Firebase.

step 6: cd test-firebase

Firebase Init: Select Hosting and press Space and Enter. Select the project you just created; Press Enter in other ways. Some screenshots are as follows

step 8:
The sample

At this point, if all goes well, you can use Firebase to host static pages for free and have your own online address, plus versioning from the Firebase console.

In step 7, there is a “What do you want to use as your public directory” option. The default is to use public as the final upload path for static files. This option can be modified and customized in Firebase. json. See Firebase hosting for more content

Use Parcel to package the build

Many of the most popular technologies require compilation, and one of the biggest complaints about WebPack is that it’s cumbersome to configure and error-prone. Using parcel to build our app is easy to use.

  • The parcel’s official website
  • parcel awesome

While Parcel claims to be zero configuration, it actually requires a little bit of configuration, such as the Babel environment. Here’s a seed project using Parcel with Vue as an example, Parcel&Vue Demo

If you have installed Parcel before, make sure that parcel version >= 1.7.0 is installed globally

npm install -g parcel-bundler
git clone [email protected]:nwa2018/parcel-vue-demo.git
cd parcel-vue-demo
npm i
parcel serve ./index.html --open -p 4567 --out-dir dist --no-cache
Copy the code

When you need to publish the application online, you need to initialize the application by referring to the firebase described above (see the first step here, which will not be described again), and finally publish the application online only need two commands

parcel build ./index.html --out-dir public --no-cache
firebase deploy
Copy the code

The initial page for the final release looks like this: Example

Document using Docsify

Docsify supports the use of MD syntax to write documents, which are elegant and comfortable. You can even use Docsify to write articles similar to vue official website. You can refer to docsify official website and Docsify Awesome, the Docsify version of this article

In docisfy – start – demo sample

The installation

npm i docsify-cli -g
Copy the code

Document locally

git clone [email protected]:nwa2018/docisfy-start-demo.git
docsify serve docisfy-start-demo/ -o -p 3456
Copy the code

Publish online and initialize using Firebase (see step 1 here)

Json public field =./, because you need to commit all files in the docisfy-start-demo directory for hosting

cd docisfy-start-demo
firebase deploy
Copy the code

Final online effect: Example

conclusion

  • Through the commandparcel serve ./index.html --open -p 4567 --out-dir dist --no-cacheLocal development of vUE applications, very little configuration content, can use the popular syntax features and engineering features
  • Through the commandparcel build ./index.html --out-dir public --no-cache firebase deployTo package and build our application and passfirebase deployPublish your app with one click and have your own online address
  • Through the commanddocsify serve docisfy-start-demo/ -o -p 3456Local open service to document and passfirebase deployOne click to publish documents, and have their own online address