当前位置:网站首页>Ten minutes to build a personal blog, including deployment online

Ten minutes to build a personal blog, including deployment online

2020-12-08 11:53:41 Fat boy happy water

*

Docsify Can quickly help build a personal blog , You just need to be able to use Markdown The syntax can be used . With the help of GitHub or Gitee Platform deployment online . Reference team members are excellent Templates

*

Docsify initial

docsify Can quickly help you generate document site . differ GitBookHexo Where it doesn't generate static .html file , All conversion work is done at run time . If you want to start using it , Just create one index.html You can start to document and deploy directly to GitHub Pages

characteristic

  • Don't need to build , After writing the document, you can publish it directly
  • Easy to use and lightweight ( After the compression ~21kB)
  • Intelligent full text search
  • Provide multiple themes
  • rich API
  • Support Emoji
  • compatible IE11
  • Support server-side rendering SSR ( Example )

For local installation

What we use here is npm install , Direct global installation of scaffold tools docsify-cli, If the installation is slow, you can use the Chinese image cnpm install

install

npm i docsify-cli -g
Copy code

Use docsify The scaffold , Just use the command directly , Note that the file name convention here is docs It's also an official recommendation

docsify init docs
Copy code

The success is shown below and docs File directory will generate the following 3 File

Initialization succeeded! Please run docsify serve docs
Copy code
  • index.html Entrance file
  • README.md It will be used as the main page content rendering
  • nojekyll Used to stop GitHub Page Files that start with underscores are ignored

start-up

  • docs Execute the following command in the same level directory , Run local service , Default address http://localhost:3000/
docsify serve docs
Copy code

Successfully opened the default generated page as follows

To write

Set the cover

Set up our cover map , Two steps are needed.

  • First, in the docs/index.html In file $docsify Property settings coverpage: true
//docs/index.html
<script>
  window.$docsify = {
    coverpage: true
  }
Copy code
  • Then create docs/_coverpage.md file
//docs/_coverpage.md
<img width="180px" style="border-radius: 50%" bor src="https://xxx/logo.jpg"> // It's best to use personal pictures logo
<p> May there be ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04dbfe7a9d91425d9d73d4b32f76161d~tplv-k3u1fbpfcp-watermark.image)![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fcf4f44683b4d239b127b57f6265b0f~tplv-k3u1fbpfcp-watermark.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/370675f42dab41b188ca8ce7448fa1a5~tplv-k3u1fbpfcp-watermark.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5ba36f9901940168c9571651e375a88~tplv-k3u1fbpfcp-watermark.image) Code </p>
<p> Stars in my eyes </p>
Copy code

The corresponding cover map can be generated

Custom navigation bar

The government supports two ways , Can be in HTML Set in the , But the link should be #/ start , The other is through Markdown Configure navigation , I prefer the latter

  • First configuration loadNavbar: true
<script>
  window.$docsify = {
    coverpage: true,
    loadNavbar: true
  }
</script>
Copy code

Then create docs/_navbar.md Document writing navigation

// notes : Create the corresponding md File jump 
*  Navigation one
    * [ Describe one ](test.md)

*  Navigation two
    * [ Describe one ](/nav2/test1.md)
    * [ Description two ](/nav2/test2.md)

...
Copy code

Create the corresponding folder

The effect is as follows

Other operating

Above is docsify Basic operation , It's enough for us to write our own personal blogs , If you want to change the theme or more operations can refer to official

Deploy online

Gitee

  • Create a blog related Repository
  • Push locally written docs project , I do not know! git Orders can be learned ~
//docs At the same directory 
git init
git add README.md
git commit -m "first commit"
git remote add origin  Remote address of your own warehouse
git push -u origin master
Copy code
  • Deploy Gitee Pages, Click on the warehouse service -> Gitee Pages Set as follows

  • After successful deployment, the following address will be displayed Browser input http://agoniquan.gitee.io/blog Can access ,agoniquan For your user name ,blog For your project name .

GitHub

  • Create a blog related Repository
  • Push locally written docs project , I do not know! git Orders can be learned ~
//docs At the same directory 
git init
git add README.md
git commit -m "first commit"
git remote add origin  Remote address of your own warehouse
git push -u origin master
Copy code
  • Deploy GitHub Pages, Click on the warehouse settings -> GitHub Pages Set as follows

  • After successful deployment, the following address will be displayed Browser input https://250786898.github.io/blog/ Can access ,250786898 For your user name ,blog For your project name .

GitHub Example

https://github.com/250786898/blogs

版权声明
本文为[Fat boy happy water]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201208115219004s.html