Successfully reported this slideshow.

Meetup gitbook



Upcoming SlideShare
Gitbook Publish FAQ
Gitbook Publish FAQ
Loading in …3
1 of 31
1 of 31

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Meetup gitbook

  1. 1. Publish a Book on Github with Gitbook Becky Peltz Seattle University Fall 2018 October 9, 2018
  2. 2. My Bio: Rebecca Peltz Instructor at Seattle University School of New and Continuing Studies Web Application Technology Studies MBA and 30+ years programming in Seattle Companies include: Boeing, REI, Regence, Microsoft, go2Net, Expeditors, UW, Seattle Public Schools, Seattle Children’s Hospital, F5 Networks, zulily, Globys, Schweitzer Engineering Labs, North Seattle College, City University, Seattle University
  3. 3. Objectives for Demo Talk Create a book online Learn about static site generators: Markdown to HTML Use some tools: Gitbook toolchain including Gitbook Editor Npm Visual Studio Code
  4. 4. Context Seattle U WATS JavaScript Texts: Shawn Rider’s books My Lab FAQ Static Generators vs Traditional CMS ** There is a and a - this talk is about running my own gitbook toolchain
  5. 5. See my medium blog on this topic
  6. 6. Let’s look at some final products WATS FAQ JavaScript Text by Shawn Rider Other...
  7. 7. Audience Web developers? Front end developers? Writers? Dev ops? Teachers?
  8. 8. Markdown vs Markup Look at a on Inspect in Chrome Dev tools - it’s HTML! Look at raw - it’s markdown Look at a Markdown Cheatsheet:
  9. 9. Prepare your environment Node: a JavaScript runner NPM: comes with Node a JavaScript package manager Gulp: a task runner installable as an NPM package Git: a program to help with versioning text Github: a repository to store markdown and host HTML Gitbook Editor: word processor that produces markdown Visual Studio Code: stay organized
  10. 10. What is Git and Github Is it worth learning? Who uses it? Who owns it?
  11. 11. Details HTTPS and not SSH clone from Github
  12. 12. The Process in 10 steps 1. Make a new repo on github to hold your new book 2. Mirror my publish template repository to local drive and then clone new repo* 3. Make adjustments to make the template yours 4. Open Gitbook editor and open local folder 5. Create content in Gitbook 6. Push to Github* 7. Open Gitbook folder in VS Code 8. “Gulp” to build html 9. Push to github* 10.Publish to GH Pages*
  13. 13. Make a repo on github This repository will hold the contents of your book as well as code to help publish it.
  14. 14. 2. Mirror my publish template Essentially want to get a copy and then save it as your own - not a Fork! 1. Create a new repository on - “new-repository” 2. Create a bare clone of this repository git clone --bare template.git 3. Mirror-push to new repository cd gitbook-publishable-template.git git push --mirror<useraccount>/new-repository.git 4. Remove the temporary repository create above cd .. rm -rf gitbook-publishable-template.git 5. Clone your repo using https git clone<useraccount>/new-repository.git
  15. 15. If you mess up and need to start over Go to and find the repo you created and delete it by going to the bottom of the “Settings” page for the repo and rm -rf new-repository in git bash
  16. 16. 3. Make adjustments to make the template yours Open the repo locally in VS Code code new-repository Modify the file package.json: name url author license - you can leave MIT license if your don’t have a specific one Homepage -<useraccount>/new-repository#readme"
  17. 17. 4. Open Gitbook editor and open local folder Leave untitled
  18. 18. 5. Create content in Gitbook editor An editor that makes writing Markdown as easy as Word processing Adding and formatting text Adding links Adding images Update Readme and add Article Save and Sync Go to IDE (VS Code) and see that is it updated Git pull verifies up to date
  19. 19. 6. Save and push content from Gitbook Editor Note that local content will be updated with this as well as Github content
  20. 20. 7. Open folder in VS Code
  21. 21. 8. “Gulp” to build HTML What is gulp? Our goal is to render web pages - has to be HTML The format the of output of Gitbook Editor is Markdown. The publish template has a JavaScript “gulp.js” file with instructions for create HTML out of Markdown. We want to produce a static html website so that we can read the content from a web page. Need to install npm packages and gitbook plugins and then we can run the gulp build. ==>
  22. 22. Installing Code to support gulp build Npm Install installs code library dependencies list in package.json npm install Gitbook plugins are list in book.json gitbook install I usually run these together. If there are no Gitbook plugins you’ll get an error message that you can ignore. gulp This will create a static website under the docs directory.
  23. 23. 8. Push to Github Upload all code to From there is can be hosted for free on git add . git commit -m”build book” git push
  24. 24. 9. Publish using GH (Github) Pages GH Pages = Github pages - free web hosting from Github on Find the repo on Go to settings and find gh-pages Choose docs as location to render May take a couple minutes to publish
  25. 25. ready When ghpage report link in green section you should be able see book online
  26. 26. Book or FAQ: Gitbook plugins What’s the difference between a book and an FAQ An article is a solution to a problem Register in book.json Plugins make it happen Can also change title and add logo
  27. 27. book.json { "title": "Making Music", "plugins": [ "theme-faq", "-fontsettings", "-sharing" ] }
  28. 28. Gitbook plugins
  29. 29. Customization See Ebooks: pdf, ePub, mobi PDF link: Cover
  30. 30. More on Static Site Generators Jekyll: Gatsby: Vuepress: uses for modifying content and netlify for hosting From a tutorial:
  31. 31. Any ideas for what you could do with this? Books? FAQ? Support tools? Family tree?

Editor's Notes

  • Create a new repo on github - say “making-music”

    Create a temp folder
    Cd temp
    Open git bash there
    Run the bare clone
    Push mirror to your account <git hub user account>
    Remove the template
    Go to github to see that the code is yours
    Clone your code with https: IMPORTANT because gitbook editor needs https to sync locally

  • Git add .
    Git commit -m”make mine”
    Git push
    *** might have to enter user name and pw to push ***
  • Add bongo:
    Notice assets folder in VSNotice assets folder in VS Code

    The Web Dev Man (To Billy Joel’s The Piano Man)
    (Play the start of Piano Man recording on my phone)
    It's six o'clock on a Tuesday
    The regular crowd shuffles in
    There's a young man sitting next to me
    Organizing his obj and bin
    He says, "Son, can you write me a script
    I'm not really sure how it goes
    But it's rad and it's neat and as short as a Tweet
    And shared from your GitHub repo"
    La la la, di da da
    La la, di da da da dum
    Write us some code, you're the web dev man
    Just a few lines tonight
    Well, we're all in the mood for a GUI
    And you've got us feelin' alright
    Now Shawn at Hunthausen is a friend of mine
    He gets me my drinks at Optimism for free
    And he's quick with React or a function in bash
    And there's no place that he'd rather be
    Oh, la la la, di da da
    La la, di da da da dum
    Write us some code, you're the web dev man
    Just a few lines tonight
    Well, we're all in the mood for a GUI
    And you've got us feelin' alright
    It's a pretty good crowd for a Wednesday
    And the students give me a smile
    'Cause they know that it's he they've been comin' to see
    To learn about coding for a while
    And the keyboards, they sound like a carnival
    And the mice clicking away
    And they sit in the chairs with excited glares
    And say, "Man, thanks for all the knowledge shares!"
    Oh, la la la, di da da
    La la, di da da da dum
    Write us some code, you're the web dev man
    Just a few lines tonight
    Well, we're all in the mood for a GUI
    And you've got us feelin' alright
    Notice assets folder in vs code
  • Look at VS Code
  • Show markdown vs html
  • Look at _book
    Look at docs
  • Update npm : npm install -g npm
    npm install --global gulp-cli
    npm install --save-dev gulp

  • ×