TL;DR
npx create-next-app --example blog-starter-typescript
Why?
- to practice writing for the public and putting thoughts on paper
Writing helps to gather thoughts together, diving deeper into the subject. Even just by starting to write, I can find mistakes and come up with new conclusions. I believe that writing should be included as the final step in the "Definition of Done".
- to improve the written English
Do you already watch movies and read articles in English? That's the most obvious way to improve your listening and reading skills. But what about writing? Then probably I should try to write, write and write...
- to try a tiny-blog approach
Literally write anything you want. If you don't know how to create good content, try making a bad one.
- to share solutions
I can find a lot of answers about how to solve various development problems just by googling. Why? Because someone just wrote an article about it.
- Or to build community, launch your newsletter, build your own brand...
Research
There are a lot of ready-to-use solutions to start a blog. Some of them are:
- communities: dev.to, hashnode.com, medium.com
Here your content will be visible to the whole community immediately. Handled and maybe even promoted by the team behind it. And you don't need to install any software.
- popular CMS (Content Management System) such as wordpress.org
It is not just for a blog, but also a popular way to create your own website. Choose your hosting, install the wordpress, pick your design template, and start writing. Or you can even skip the installation process by using ready-to-use hosting solutions such as wordpress.com.
Easy to start without any dev experience. Easy to build your blog alongside other parts of your website.
- headless CMS, publishing platforms like ghost.org
Mixed way. There are a lot of built-in integrations with various third-party services out of the box. You can use one of the provided design themes or even set up your own static website while using CMS only as a data-management tool via API. So you will have full control over the visual representation of your site.
Free to change anything. Build anything. Plug-in any analytics, third-party services you want. No dependencies at all. But you have to do a lot of things manually.
So these are different types of solutions. Each of them has its own pros and cons and the choice really depends on your goals and skills.
As a developer, to make experiments, to understand how things work under the hood, and to have full control, I chose the static sites option. But in general, this may not be the best way to start a blog! If you are more interested in the content itself and building a community, then another solution is more likely to suit you.
But keep in mind that your own website gives you a bit more freedom and control. It will stay at any time, can serve you as a playground and your "home" place.
Another tip could be that it's not necessary to stick only to a single solution or platform, you can have your own self-hosted blog while cross-posting your posts on various websites such as reddit, medium.com and others. Just do not forget to set up canonical url while cross-posting on other platforms.
So, what is the static site exactly?
Simply put, it's a bunch of "static" ready-to-read files saved on the server in opposite to the "dynamic" approach when content are generated on the fly dynamically. Static sites have their own pros and cons over dynamic ones such as speed, performance, security, ease of development and deployment. You don't need to set up a database or a "backend" server, so I think this is a perfect choice for a landing page or a blog.
And again, there are a bunch of static sites generators, just look at this link. There are literally hundreds of them.
I was already a little familiar with two popular static sites tools, such as Gatsby.js and Next.js. But still, I had to do some googling to compare Next.js vs Gatsby.js as a blogging solution, which one is better?
Personally, I've decided to go with Next.js, due to the following:
- Next.js can generate static pages, just like Gatsby.js
- Great support of server-side rendering in Next.js, so it would be easier to migrate to the "dynamic" approach mentioned before
- Gatsby encourages you to use GraphQL and this is not my choice for a blog, but it's just a matter of personal preferences.
Solution
Next.js typescript blog starter!
The link above is just one of the examples that one can use to start a blog.
Here you can find more about how to use it.
So to create this blog I used a simple command:
npx create-next-app --example blog-starter-typescript
That's it, that's how this first post was born!
Afterwards
I've played a bit with the design by using other sites as references. Mostly it was about typography changes and styling common HTML tags such as <ul>, <table>, <p>... Just try various variants until you are satisfied with the results of HTML appearance.
Also, to make your blog a little more accessible you can use an appropriate font. You can find many of them on Google Fonts website. It's really easy to use by doing so:
@import url('https://fonts.googleapis.com/css?family=Spectral');
h1 {
font-family: 'Spectral';
}
Personally, on my blog, I use the Atkinson Hyperlegible font. If you would like to find out more about typography I would recommend practicaltypography.com online book.
Publish
Finally, the blog has been created, the post has been written, there is only one thing left - deploy it to the Internet. And you can even do it without buying a domain at first!
To deploy static sites, you can use google firebase hosting.
Out of the box it'll give you a third-level domain (subdomain) for your website, e.g. mysuperblog.web.app. Moreover, it provides "https" support for your real domain when you'll be ready to connect it, and it's absolutely free for a small amount of traffic!
SEO checklist
The Internet nowadays is literally like a black hole. There are millions of websites. Whether you use a site builder or make your own blog from the scratch it's always a good idea to be sure of SEO (search engine optimization).
Here is a minimal SEO checklist:
- semantic markup: use specific HTML tags such as <article>, <p> and others instead of universal one like a <div>
- h1, h2, h3: structure your document
- attributes: provide images alt, links titles
- document metadata: set up document's title, description, keywords, Facebook Open Graph tags, support for Twitter cards
- microformats, rich snippets
- internal links, external links: the document must be a part of the whole net
- robots.txt, sitemap.xml, google webmaster usage
- canonical tags: <link rel="canonical" href="https://..." />
- optimized URLs: include keywords, use hyphens, max 3 levels of path nesting
- optional: use dates, numbers, power words in titles
Top comments (0)