March 13, 2018 | By Edgar Aroutiounian | yerevancoder, tutorial, reactjs
This is part one of a two part series, see part-two for the rest of the post.
yerevancoder, (yc), is a gatsby web application and its built using a
because some of the site is generated on the server side (the blog posts) and some parts (the hiring
board) are dynamic and made on the client with
because we use firebase to provide for things like user
authentication and a database, (because our traffic is low we don’t pay firebase for the
don’t have to run a server. Because the site is a github pages site, we don’t pay for hosting (the
computers that physically provide the
are very popular now because you can build an entire startup just by writing
GitHub gives us a free domain at
http://yerevancoder.github.io but you’ll notice that the site
https://yerevancoder.com. So we have a custom domain name, this is done by having a
public/CNAME. However that doesn’t provide us with
https, so for that part we use
cloudflare which provides us with free
DDoS protection and
Blog posts are easy to write and require knowledge of only two things, git
and markdown. To learn
git, you need practice and we use
it so that we can save the blog posts to the github repo and make pull requests (a request for
someone to accept your work into a master copy of the source code). I recommend looking at this
interactive website for learning git and our own blog
post. For markdown, look at the source code
of other blog posts and keep this
Exact steps to write a blog post:
cdto your recently cloned directory and install all the dependencies with either
npm. So something like:
$ git clone YOUR_FORK_OF_YEREVAN_CODER $ cd YOUR_FORK_OF_YEREVAN_CODER $ npm install # OR just type yarn
npm run devor just
yarn dev. This will start a local web server on
localhost:8000and you can see the site automatically rebuilt whenever you make a change, it lets you iterate very fast, the automatic refresh is called hot-module-replacement and gatsby sets it up for us.
gatsby will generate an
src/pages, so make a
new directory with
src/pages. Notice how the other directories are organized with
the date and title in the directory names.
index.mdfile. This is your blog post and you write it in
markdown, be sure to make sure that the top part of the markdown file is set up correctly,
This is basically the flow of all open source projects so its important to get some experience in it, the dynamic part which is the React coding part, will be explained in part two.
Comments powered by Talkyard.