Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building your own website with Jekyll + Github Pages

Building your own website with Jekyll + Github Pages

96f6148ae5af63f90246a3817686b457?s=128

Leticia Portella

May 08, 2020
Tweet

More Decks by Leticia Portella

Other Decks in Technology

Transcript

  1. Building your own website using Jekyll + Github Pages @leportella

  2. Based on a post by @jtemporal https://jtemporal.com/publishing-a-website-with-jekyll/

  3. Why have your own website? • You don't depend on

    a third-party website to host it • You have access to analytics that you want (for free) in many other tools • We shouldn't let the internet become the domain of a single corporation (Medium, LinkedIn... I am looking at you) • It is fun! More on a blog post: https://leportella.com/my-experience-with-blogs.html
  4. For this tutorial you need • A terminal (iterm for

    MacOs) • Git • Ruby/Gem (Ruby package installer) • A Github account • Sublime (or any text editor) • A Disqus account (optional) • A google account (optional) • An imgur account (optional)
  5. Disclaimer! I made this tutorial non-engineering friendly. If you know

    what I'm talking about, feel free to take the slides and go faster :) For non-engineers: We will use a lot of terminal. Some concepts might be tricky, so don't feel afraid of errors and you are encouraged to ask questions!
  6. Templates We will use a template called Indigo But... you

    can use jekyllthemes.com to find another design that matches your style!
  7. Let's install things Open the program iterm

  8. Creating a new folder! Create a new folder using the

    command mkdir my-blog Enter your new folder cd my-blog Now let's install what we need for jekyll! gem install jekyll bundler
  9. Now let's create ourselves a repository Go to github.com On

    the right side, click New to create a new repository Give the name <username>.github.io Leave everything else as default
  10. Let's make it available in our computer! Copy the link

    gave afterwards On the terminal, clone the repo locally using the same link git clone https://github.com/leportella/leportella.git Now let's see that the folder exists: ls
  11. Wait… let's understand what's going on

  12. Now let's download the project To download we will use

    this command: git clone https://github.com/sergiokopplin/indigo You can see that there is also a new folder called indigo on your computer: ls Now we have two folders: indigo-stable/ and leportella.github.io/ Now let's copy what's inside indigo to our own repository cp -r indigo-stable/* leportella.github.io/
  13. What was that? We don't want to keep the connection

    with the Indigo original repository. By copying the content, we will do that locally :)
  14. Let's make our first commit :) Enter your blog's folder

    cd leportella.github.io/ Now let's do git add * git commit -m "Initial commit" git push origin master
  15. What was that?

  16. Let's install the requirements Run: bundle install Now run: bundle

    exec jekyll serve Open your browser and go to localhost:4000 Obs: ctrl+c to exit this process
  17. Let's make our website seems ours!

  18. Let's configure Sublime Open Sublime Then on the top you

    can click: File > Open > username > my-blog > leticia.github.io
  19. Now open the file _config.yml Open the _config.yml file Change

    a couple of things: name, bio, description, email, social medias, etc Change also the url to the name of your repo: <username>.github.io
  20. Now open the file _config.yml Save the file. On the

    terminal click Command+C to kill the website process. Restart the process again with bundle exec jekyll serve See the changes you made in localhost:4000
  21. Let's add our own photo Go to imgur > images

    > add images > upload a photo you like :) Then click on your photo and get the photo url Then change on the _config.yml file to have your direct link:
  22. Can you see any change?

  23. Let's add comments!

  24. Let's add comments :) Go to disqus.com Select I want

    to install Disqus on my site
  25. Let's add comments :) Define an identifier to your website

    Choose the Basic plan
  26. Let's add comments :) Choose Jekyll on the platforms

  27. Let's add comments :) Just click Configure on the next

    page and then again Complete Setup. Get the unique identifier and add it to the _config.yaml file:
  28. Now let's make it online! We made a lot of

    changes on the _config.yml file. Let's make them public! git add _config.yml git commit -m "adding my configs" git push origin master If you open your Github repository page, you will see that the _config files have changed
  29. Now let's make it online!

  30. What was that?

  31. Let's check online! Go to the online link: leportella.github.io If

    you open a post that already exists you will see that you need to agree if a couple of things from disqus, but after that, you have space for people to comment on your blog post!
  32. Real life example

  33. Let's add analytics!

  34. Let's add analytics Go to https://analytics.google.com Click start measuring and

    create your profile You will get an ID like UA-1234567-8 Add this to the file:
  35. Now let's make it online! We made yet another change

    on the _config.yml file. Let's make it public! git add _config.yml git commit -m "adding google analytics" git push origin master If you open your Github repository page, you will see that the _config files have changed again
  36. What does that mean? If you open your website in

    a new browser, for instance, and go again to the analytics page you will see an access:
  37. Real life example

  38. Questions?

  39. Let's make the blog public On Github repository, go to

    the settings tab:
  40. Let's make the blog public Then search for Github Pages

    and on sources select master
  41. Let's make the blog public Once you're finished, the link

    to the public website will be available on top:
  42. Celebrate!

  43. Let's create a blog post

  44. What is Markdown? Markdown is a language formatting :) You

    could say that it is an HTML simplified You can use markdown as a way of making your post's styles. If you check, one of the original blog posts have a lot of examples of things you can do: http://localhost:4000/markdown-common-elements/
  45. Markdown 101 # Big Title ## Smaller title ### Even

    smaller title *a phrase* Phrase will be italic **a phrase** Phrase will be bold ![](https://link.com) Add image [This is a link](https://link.com) Add link * Something Bullet point
  46. Let's create a blog post! Double click _posts/ folder and

    create a new file. On the new file create this structure: Pro-tip: use the other files inside _posts/ to get the basic structure ;)
  47. Let's create a blog post! Use Command+S to save the

    file with the name: 2020-03-11-my-first-post.markdown Restart the process on iterm. What happens on your local website?
  48. A new post has arrived!

  49. When to write? • When you have a good idea

    ◦ Example: https://leportella.com/new-eng-stripe.html • When you want to structure something you've learn ◦ Example: https://leportella.com/scala-I.html • When you want to share something about a experience you had: ◦ Example: https://leportella.com/from-oceanographer-to-programmer.html • When you saw a thread online that requires further things to be said ◦ Example: https://leportella.com/why-you-should-be-in-communities.html • When you answer someone and the answer took you more than 5 minutes to write it down ◦ Example: https://leportella.com/my-experience-with-blogs.html
  50. Ready for a challenge?

  51. Challenges! • Create a blog post that it is not

    marked as green • Check the markdown options you have • Publish your blog post on the online version of your blog! • Change the About page! • What's the difference between a project and a blog post? • Create a new author! • Change authors in your blog post • Delete the original posts