[JOURNEY] My niche website as a full stack developer

[ali arikan]

Today me and my girlfriend found a really good niche to start blogging.

We don't have really high expectations but we think this journey threads will keep us motivated to work on this project.

Background
I started programming when i was 13 years old and now im 23. For 3 years we've been developing backend API's and websites for individuals and companies as freelancer with my gf. My girlfriend also knows programming but she decided to go with UI design / frontend development. So we created a harmony, she designs the website i handle the dirty stuff (backend) and sometimes frontend.

We had some really good ideas but none of them worked well. We searched so many niches like adult, gaming etc. but almost none of them succeeded.

Yesterday we came across an idea while playing games. I performed quick search about it and it looks like it has potential (30-100K volume, low competition, no websites around this niche).

We decided to build a website around this niche but with a twist. We are going to build it from scratch. I personally don't like systems like Wordpress, Blogger etc. For my perspective they don't give you the control of website. Are they good for quickly starting a website, yes. But i don't like those. I want to have full control over my website, this is how i work.

Technical Stuff
We are going to build frontend from scratch using Next.js and use it's static building feature. That means every page (that comes from CMS) will get rendered to HTML file. That makes website really fast because it doesn't perform API requests. Browser will download static files (HTML, CSS, JS) from a CDN and will render it instantly. It is also good for SEO (I am not sure about this because some people say Google already uses JS rendering using Chromium).

For backend we are going to use open source Strapi CMS hosted on local machine (maybe a raspberry pi). This may confuse some people because of local installation. Yes, it confused me at first but I tested this approach by deploying simple website to Vercel by tunnelling the port of Strapi using Ngrok and putting that url to environment variables when deploying. It takes all the information from local hosted (and tunnelled by Ngrok) Strapi deployment (posts, pages, other data stuff) and renders those to static files.

Me and my girlfriend also don't like writing css. So we decided to use TailwindCSS. It allows us to quickly prototype and build web pages.

For hosting, we are going to use free static website hosting providers (Cloudflare Pages, Netlify, Vercel, etc.). Because it's free. We will probably go with Cloudflare because of it's huge network.

As we are both student we have Github Student account which allows us to create private repos. We love open source but i think for this project open source is not necessary.

Monetization
For like 3-4 months we are not expecting money from website. It's because we will not going to display ads in first months. We will just post regular and good content around the niche.

After some months and visitors we will start to display ads that doesn't distract and bother users. Because our first priorty is give helpful content for visitors.

Strategy
Our school is going to start in 2 weeks. So we need to start iterate quickly. This week we are planning to finish the website and deploy the website first time.

Next week we will start posting. We are both fast writers so we are planning to write 3-4 posts per day (maybe more).

In our second week with school we will spend majority of our time in school (like 7 hours) so in those times we will try to post 2 posts per day.

So that is our plan for this month. Next month we will try to work like second week.

We didn't plan more that 2 months. Because things can happen.

TL;DR;
We are going to build a website from scratch using Next.js and Strapi CMS and deploy website to free static website hosting (probably Cloudflare Pages).

In our first week we are planning the website. Second week we start to post 3-4 posts per day. Next weeks our school is going to start so we will try to post 2 posts per day.

We are not planning to monetize the website for 3-4 months. We want to deliver quality content to visitors.

Wish us luck.

 

[polecat]

Sounds cool good luck to you both

 

[693840]

We decided to build a website around this niche but with a twist. We are going to build it from scratch. I personally don't like systems like Wordpress, Blogger etc. For my perspective they don't give you the control of website. Are they good for quickly starting a website, yes. But i don't like those. I want to have full control over my website, this is how i work.

Excellent choice. You'll be able to customize anything you want, outperform your WP-using competitors in terms of speed, and it's way easier to optimize for https://developers.google.com/speed/pagespeed/insights/.
Depending on your knowledge, it should only take 1-3 days max to re-build most WP blog features, including a simple editor.
Best of luck!

 

[Ranking Expert]

Sounds good but what is your goals?

 

[ali arikan]

Excellent choice. You'll be able to customize anything you want, outperform your WP-using competitors in terms of speed, and it's way easier to optimize for https://developers.google.com/speed/pagespeed/insights/.
Depending on your knowledge, it should only take 1-3 days max to re-build most WP blog features, including a simple editor.
Best of luck!

Absolutely.

 

[ali arikan]

Sounds good but what is your goals?

We are actually doing this because we love this niche. We don't have goals like 1000$/month or something. Our financial status is really good as we are freelancing.

Maybe 1000 unique visitors/month is a good goal in 3 months.

 

[Ranking Expert]

We are actually doing this because we love this niche. We don't have goals like 1000$/month or something. Our financial status is really good as we are freelancing.

Maybe 1000 unique visitors/month is a good goal in 3 months.

Good luck to you both.

 

[ali arikan]

Good luck to you both.

Thanks

 

[ahenna]

sounds like it will be a wonderful journy, I have a question please, is it possible to have a backend on free pages hosting services like github or cloudflare pages ? I'v seen you mentioned Strapi CMS...

 

[ali arikan]

sounds like it will be a wonderful journy, I have a question please, is it possible to have a backend on free pages hosting services like github or cloudflare pages ? I'v seen you mentioned Strapi CMS...

As far as I know, you cannot host a cms on static page hosting services. It's because those CMS's are generally built with Node.js, Golang, Rust etc. Those services only allows you to host .html, .css, .js files.

That's why we decided to use Strapi CMS locally. For deploying we will going to tunnel port using Ngrok and put the url that ngrok gives us to environment variables.

Edit: For some projects you don't need a backend. For example my and my gf's personal blog doesn't have a backend. We write in MDX and when we are deploying, the code we wrote transforms MDX files to HTML files.

 

[braindancer]

Why bother thinking around if google renders js or not if you're using nextjs which supposes you to use server side rendering. You'll be fine seo wise here.

And what about content, are you going to write it both with you gf?

 

[UddiGamer]

Great. I also have a website, that I built using Publii cms. It's also a open-source cms. It's a static website generator, that runs as a desktop app. I am using cloudflare pages for free hosting.

 

[ali arikan]

Why bother thinking around if google renders js or not if you're using nextjs which supposes you to use server side rendering. You'll be fine seo wise here.

And what about content, are you going to write it both with you gf?

We are going to write seperately.

Great. I also have a website, that I built using Publii cms. It's also a open-source cms. It's a static website generator, that runs as a desktop app. I am using cloudflare pages for free hosting.

That's great I've heard Publii cms but i haven't used it yet.

 

[Superman.s]

Good Luck

 

[UddiGamer]

We are going to write seperately.



That's great I've heard Publii cms but i haven't used it yet.

It's good and very user friendly. I don't need any other server to host it. I can use my local machine. The user interface is somewhat similar to Ghost CMS

 

[ali arikan]

19.09.2021

Problems
We didn't finished the website yet. But that doesn't mean we are behind of the schedule, we are also posting content. We came across several technical problems.

One of them was Next.js's built-in Image component. By default it needs to optimize the image before displaying. It works great when not exporting the website because Next.js's built-in image optimization library only works in build mode not in export mode.

First thing we tried was getting rid of Next's Image component and use HTML img tag. It works (gave a warning because of ESLint) but it also didn't export the images in the build directory. Then we tried to download the image as buffer and convert that buffer to Base64 and then adding src attribute of Next's Image component. It surprisingly worked, but that approach has a really big downside. By converting to base64 and embedding that base64 data to image's src attribute, we are increasing the file size of .html file and that's one thing we dont want. We want it to be lightweight as possible.

So we had to come up with another idea. Maybe you know Express.js's middleware functions. It works something like this. When a component request an image, we are actually downloading that image to a temp directory, optimize the image and move it to Next.js's output folder. Then in the component we just set the src attribute like src="./assets/image.png". It works and we are really happy about it because that problem was a really headache.

Another problem was in-site search. Actually is was really easy to fix because there are lots of open source pure javascript search libraries. One of them is https://github.com/lucaong/minisearch.

Surprisingly using minisearch was really simple. We just created an index by making a request to Strapi server to for each collection we wanted to be in the search. Then we used the Context API of React to pass the instance of minisearch to the search component (it is just a stylized text input). Then we bind input's value to minisearch. We are actually surprised by it's speed.

Another problem was structure of Strapi. We came up with lots of ideas about structure. First thing we tried was creating pages in /pages directory in Next.js and populating those pages by making request to Strapi. This approach works but that is not we exactly wanted. We wanted it to be flexible. Biggest downside of this approach was layout. For example in "Page A", we just embed the "Component A" at the top of the page. But later when we want to change it, we would have to change the frontend code again and commit that code to repo again etc etc. Instead we wanted to change layout in Strapi and deploy the website again using webhooks (Webhooks are awesome).

So we just created a Page collection in Strapi and write in MDX (MarkDown eXtended). Then just created [slug].js file in pages folder and rendered MDX in that page. It, again, worked like a charm.

These were the technical problems we came across. There are also some real-life problems .

Things left to do

• Themes: We want to have multiple themes (not just like and dark mode). We want to build themes easy as possible. So we are trying to find a way to do that easy as possible.
• Navigation bar: Yes, we still haven't finished the navbar.
• Responsiveness: This is probably the most important thing. Currently website is not responsive. But thanks to TailwindCSS we are not worried about this at all.

Summary
This week we couldn't finish the website but, again, we are not behind the schedule. Because while coding the website we also added required content for the website. We came across some problems like Next.js's built-in Image component, search and structure of CMS. We still have some things left to do, for example responsiveness.

This week we are planning to finish the website. Then start posting guides, articles and dev-blog since I love writing technical stuff.

Thanks for reading this far, have a good day people.

 

[ali arikan]

Good luck with your journey!

Thank you

 

[timothywcrane]

Are you writing an SSG for a content project, not to open, sell or SAAS the SSG? Am I missing something or is there a reason other than not liking WP/CMS complexity that drives you to do this?

 

[ali arikan]

Are you writing an SSG for a content project, not to open, sell or SAAS the SSG? Am I missing something or is there a reason other than not liking WP/CMS complexity that drives you to do this?

Sorry but i didn't understand the question well.

But, we are not writing SSG (Static Site Generator?). We are building a blog like website using Next.js's static export feature. By doing that each page will have its own html etc. It is not a SaaS (Software as a Service?) either. We don't like Wordpress because it's way too complex and has too many features we don't want. Also I don't know very much about PHP so customizing the website without using plugins or themes is way too hard for me. So we are using Strapi CMS for storing our content like "Blog Posts", "Guides" and "Pages" etc.

Thanks to Next.js's getStaticProps method we can make a request to Strapi CMS in build-time and get the data we want and render that. By using that method we can export the website.

I hope this message answers your question, if not I'd be appreciated if you ask it little bit clear as I am not native English speaker

 

[timothywcrane]

(The wheel I thought you were reinventing)- Thanks to Next.js's getStaticProps method we can make a request to Strapi CMS in build-time and get the data we want and render that. By using that method we can export the website.

I hope this message answers your question, (that you are not reinventing the wheel) if not I'd be appreciated if you ask it little bit clear as I am not native English speaker

Following along...