June 29, 2020
Welcome!
This website has been built with Gatsby and this blog attempts to document my learnings in building this website. This blog assumes that you have a basic understanding of gatsby and I will document some of the major steps I’ve taken to build this website.
For starters, here is a reference to MDX syntax, which is what this blog is written in.
This website is a copy of the website tufan.io as it is in June, 2020. As the company launches, their website will change.
I wanted to create a gatsby website with a landing page. I had been going through many gatsby starters and realized that a lot of them are blogs and that their landing page is an index of blog posts. Not sure of how to create a landing page I started with trying to replicate tufan.io, which has a simple one page website at the time of this writing. I am not a designer and I have taken their images, with permission, to create this website.
So, where do we begin?
I started with the gatsby starter gatsby-starter-blog-mdx.
MDX is a little tricky to get working and I thought this would be a good starting point. I will add
the plugins I need as we go forward and document the process.
Since all pages in src/pages/<xyz> in the root of a gatsby project are available as http://yourwebsite/<xyz>,
I started with src/pages/index.js as the home page, the landing page. index.js has code to display the list of
blog posts, so I renamed the file to src/pages/blogindex.js before creating a new index.js. I wrote basic html in jsx first with no
css styling to replicate the tufan landing page.
I copied the images from the tufan website and added them in. This is the website now. It is not pretty, but the content is there.
You can find the source code of this first step. The final website is what you are reading: https://gatsby-replication-tufandotio.netlify.app/