Web Development on jshji

SEO, nextjs

Sun, 30 Jan 2022 23:15:00 +0000

So I’ve implemented nextjs on this blog. You shouldn’t feel anything different of course, as its an internal change. I thought nextjs was going to create static HTML files for all, but it turns out it didn’t. (But it can do if we want to). This means that:

SEO friendly doesn’t necessarily mean you have to have HTML files

I think nextjs still uses js and some other things, but somehow they achieve SEO. Maybe I’ll have a look later, or maybe not as i don’t realy need it. It’s good enough to know that these thing exist.

Nextjs

Thu, 27 Jan 2022 20:09:00 +0000

← Back

Next.js

Solves lots of problems regarding static sites generation.

Static generation

Your contents or paths depend on external data.

> Your contents depend on external data.

function Blog({ posts }) {
 // Render posts...
}

// This function gets called at build time
export async function getStaticProps() {
 // Call an external API endpoint to get posts
 const res = await fetch('https://.../posts')
 const posts = await res.json()

 // By returning { props: { posts } }, the Blog component
 // will receive `posts` as a prop at build time
 return {
 props: {
 posts,
 },
 }
}

export default Blog

> Your paths depend on external data.

First, prepare a special file under a path, pages/posts/[id].js. Here, [].js is special structure. Then, similarly, add a function at the bottom:

Project 1 - Refactor InkyFingerz

Thu, 27 Jan 2022 12:20:00 +0000

← Back

Project Description

Refactor the codes for InkyFingerz, using modern tools, especially template engine and static site generator.

Project Objective

In the end, the project will have:

Much less reptition in terms of developer experience. For example, the developer won’t have to copy and paste Header and Footer for each of the three pages.
The output should be roughly the same as current version. For example, there will be separte files for each page (static!).

Technology

I’ll use 11ty for the static site generator, and use liquidjs for template engine. 11ty is compatible with a dozen template engines including Nunjucks, liquidjs, Mustache, ejs, pug and more. I’ve used ejs and pug before, like, I’ve had a go at them. So it won’t make much difference even if I learnt a new one. On the website, 11ty shows supported features for each engine, and liquidjs and nunjucks had the most supported features. I won’t need most of them, but still! I chose liquidjs because it is actively being maintained, whereas nunjucks had its lastest release 2 years ago.

Jamstack, Static Site Generators, and Lack of High Level Planning - Again

Wed, 26 Jan 2022 02:21:00 +0000

← Back

I talked about lack of high level planning before in SPA and SEO - can we make peace? post. High level planning is extremely important. With high level planning, we can achieve:

A much shorter development time: I don’t have to wait until the problem arises after all the coding.
A better product: well planned product vs. a toy!

The problem is that coding is fun, so whenever I have an idea I have this urge to just get my IDE up and start creating something. Well, it’s definitely much, much, much better than not creating anything, (no product vs. a toy) and I think it’s a good way to get used to programming and all when you’re a beginner. In fact, when you’re just starting programming, maybe you know too little to plan anything good. But now I should be moving on from the beginner phase, so it has almost no benefits, but a lot of harms.

SPA and SEO - can we make peace?

Sun, 23 Jan 2022 22:20:00 +0000

← Back

After my blog came into a shape, a question came to me: how do I get my blog to be not just searchable on Google, but also provide meaningful meta-data? Few days ago, I did manage to submit my webpage to Google, so now the world’s most popular search engine does have my data. It was a simple process, all I had to do was to verify that this address (*.jshji.com) was mine. This is what Google’s search result shows currently:

Web Development on jshji

SEO, nextjs

Nextjs

Next.js

Pages

Static generation

> Your contents depend on external data.

> Your paths depend on external data.

Project 1 - Refactor InkyFingerz

Project Description

Project Objective

Technology

Jamstack, Static Site Generators, and Lack of High Level Planning - Again

SPA and SEO - can we make peace?