Building your own website with Jekyll + Github Pages

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  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