This is the 7th day of my participation in the August Text Challenge.More challenges in August

Some time ago, when I was surfing the Internet, I found a writing tool combination called Gitbook + Typora, which could be called a miracle.

After Amway visited Blink and Wechat moments, one of my friends showed great interest and asked me to make a simple tutorial to explain how to use this tool.

Okay, set it up!

1. Effect display

Gitbook + Typora, I call it a “magic tool”, not only because it can be used to write articles, but also because it can directly convert your Markdown articles into PDF, into various common formats, and even into web pages to be published online.

Just when my personal website was approved for filing, I made a small website with Gitbook + Typora and hung it on my website.

Welcome to visit.

Example 1 travel guide: gitbook.smartCrane. Tech

Personal feeling ha, this Gitbook web layout, use to read some study notes, blog posts, e-books, really is a great experience.

Students who like writing can use this to quickly build a website of their own works;

Crawler students can regularly climb some blog articles, novels, news and so on, stay at home in the world.

Hahahaha. Everybody can be on this foundation, exert oneself cleverness and wisdom to the top of one’s bent, make the individual website that belongs to oneself.

2. Environment construction

We need to prepare two tools in advance, Gitbook and Typora.

2.1 GitBook

GitBook is a Command line tool based on Node.js that uses Github/Git and Markdown to create beautiful ebooks. (From Baidu Encyclopedia)

Installing GitBook starts with installing the Node.js environment.

Once you have downloaded the node.js installation package for the corresponding version, you can install it along the way (at the end of the day, if you asked if you wanted to install dependencies, you installed them too).

It’s super easy. No trouble at all.

Gitbook download link: nodejs.org/en/download…

After installation, open the command prompt (win+R, enter CMD, press Enter)

Type the following command to install GitBook:

npm install -g gitbook-cli
Copy the code

After the installation, you can run the gitbook -v command to verify that the installation was successful.

If the following information is displayed, the installation is successful.

CLI version: 2.3.2
GitBook version: 3.2.3
Copy the code

Isn’t it very simple?

2.2 Typora

Typora is a WYSIWYG Markdown text editor that combines the edit and preview areas into one.

There are a lot of Markdown editors out there, so just pick one that’s comfortable for you.

I chose Typora for two main reasons,

One is that its interface is very clean and beautiful and pleasing to the eye;

Second, the interface looks very similar to the GitBook’s web interface layout.

Typora download link: typora.io/

Above is the download link, the installation process is nothing special, normal installation can be.

The other:

I saw some people online said that there was a wall, download down the situation (anyway, I have not encountered)

Just to be safe, I uploaded a web disk (Windows X64)

Link: pan.baidu.com/s/1YdfgI97h… Extraction code: ERRM

3. Basic use of GitBook

Create a folder locally, such as THE D: MyBooks\NoteBook folder I created, to store note documents.

Open the CMD window and run the CD command to go to the created folder.

C:\Users\smartcrane> d:
D:> cd MyBooks/NoteBook
D:\MyBooks\NoteBook>
Copy the code

Then run the following command in the directory:

D:\MyBooks\NoteBook> gitbook init
Copy the code

Press Enter automatically initializes the folder, and two files, readme.md and summary.md, are generated in the folder.

Then use Typora to open the two.md files and edit them yourself.

  • Readme. md is the home page, so you can write anything you want.

  • SUMMARY. Md is the directory where you can create a directory

After you edit the directory, run the gitbook init command again. It will automatically create the corresponding files and folders according to the path and file name in the directory.

Once created, you can also continue to edit the contents of each file.

Once the file is written, you can use GitBook to generate a web page and preview it in your browser

After executing the gitbook Serve command, a 4000 port is launched, which can then be viewed in a browser at http://localhost:4000.

Isn’t that cool?

In addition, Gitbook also has a command called Gitbook Build, which can generate HTML pages from these Markdown articles so that you can deploy them directly to your own server site. Here’s how to do it.

Then, a _book folder will be generated within the folder, and everything in this folder will be copied to your server’s web site

Then you can access it through the Internet.

Sample personal notes: gitbook. Smartcrane. Tech/Shanghai /

4. GitBook of actual combat

In the previous crawler, we crawled a lot of text articles in Markdown format.

Next, I plan to make a website of these articles through Gitbook and put it on my own server (only for learning and communication).

import os

def saveMarkdownFile(filename,content) :
    with open("newdata/" + filename + ".md".'w', encoding='utf-8') as f:
        f.write(content)

path = "./newdata/"
files = os.listdir(path)
str = ""
for filename in files:
    Gitbook parsing errors when special characters are contained in # filenames
    newName = filename.replace("#"."").replace(")"."）").replace("("."（")
    str+ ="* [%s](Shanghai Tourism Guide /%s)\n"%(newName[0: -3],newName)
    Change the file name synchronously
    try:
        os.rename(path+filename,path+newName)
    except:
        print(newName)

saveMarkdownFile("Summary".str)
Copy the code

A quick explanation of the above code:

  1. First find the path where Markdown articles are stored and read the list of all articles.

  2. Remove special characters in article titles, such as # (), to avoid parsing errors.

  3. Table of contents that generate articles according to format [title](link).

  4. Removes characters from the file name and synchronously renames the file.

Once we’ve done that, we just need to

  1. The generatedSummary.mdSo what’s in that file, copy it to the one that we created earlierNoteBookIn folderSUMMARY.mdIn the.

This step mainly wants to save the hand to hit the catalog effort.

  1. Copy all the articles in this directory to the corresponding path in the NoteBook folder you created earlier.

Perform gitbook init initialization as described in the previous section

Then start the service with Gitbook Serve and preview the effect in your browser

If you are satisfied, gitbook build the page and upload the page resources in the _book folder to your own server.

Then you can access it through the Internet.

Sample tourism strategy: gitbook. Smartcrane. Tech/Shanghai /

5. Problems you may encounter

5.1 An Error Occurs When the Gitbook command is executed in the PowerShell Window

Unable to load file C: Users\ SmartCrane \AppData\Roaming\ NPM \gitbook.ps1 because scripts are not allowed to run on this system.

This error occurs when I run gitbook from a PowerShell window, but it works fine when I run it from a CMD window.

The solution is to use CMD instead.

If you hate CMD window, use CD command to switch the directory is more troublesome, you can first open the corresponding folder, and then enter CMD in the address bar at the top, press Enter.

5.2 An Error Occurs when I Run the Gitbook Serve command

This error may occur if you execute the Gitbook Serve command.

Error: ENOENT: no such file or directory, stat ‘D:\MyBooks\NoteBook_book\gitbook\gitbook-plugin-livereload\plugin.js’

Open copypluginassets.js in C:\Users\ SmartCrane \.gitbook\versions\3.2.3\lib\output\website.

Modify lines 67 and 112 to confirm: true.

5.3 When I Directly Open the local index. HTML file, links cannot be redirected

If you open the exported.html file directly, using the file:// protocol, the link will not jump to the problem;

If you open it through Gitbook Serve, you can open it through http:// protocol.

6. Reference materials

[1] GitBook went from muddled to beginner

[2] Gitbook uses documents

If there is something in the article that is not clear, or the explanation is wrong, please criticize and correct it in the comment section, or scan the qr code below and add our wechat. We can learn and communicate together and make progress together.