On the last post we created our MVP, setup our Gitlab repository, setup our hosting on Vercel, and pointed our domain to Vercel. It sounds like a lot and it kind of is, but the point was to just get the most minimal app deployed. This serves as the band-aid to delivering something useful to the internet, and once the first one is done, it becomes addictive. The main goal is deploy as much as possible without feature creep becoming an issue.
The plan for today is going to be:
- Adding analytics from Plausible Analytics.
- The reason I went with them is because while they aren't free, it's minimal and I'm not just giving a ton of user data to Google.
- Adding Tailwinds and some minor styling to freshen up the site.
Adding the analytics script
First you have to head over to Plausible and create an account. They give a 30 day trial without a credit card so no excuses. Once you have the account, Add a website and create the snippet.
Now since we're using NextJS we need to use one their special pages named document.js and it goes in the pages directory. Here's what my _document.js looks like.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<script
async
defer
data-domain="whenarethefights.com"
src="https://plausible.io/js/plausible.js"
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Give it a quick save, commit, push, and go to Plausible to make sure it's working. git add . && git commit -m "Add analytics" && git push. Then you get to see this cool screen.
Adding Tailwinds
So one of the main benefits of using something popular is getting pretty straightforward documentation. Here is how to setup tailwinds with NextJs.
Installation
npm install tailwindcss@latest postcss@latest autoprefixer@latest
git commit -am "Add Tailwinds, postcss, and autoprefixer"
npx tailwindcss init -p
Following the instructions I updated tailwind.config.js and styles/globals.css to look like the following
// tailwinds.config.js
module.exports = {
purge: ['./pages/ **/*.{js,ts,jsx,tsx}', './components/** /*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Save and commit again. This steps important just in case shit hits the fan, you have a known good starting place.
git commit add . && git commit -m "Configure Tailwind"
Updating the style
So im going to cheat here and just go to https://tailwindui.com/. The reason being is I'm not the best designer and it's just easier. If you don't want to pay for this, there is an alternative free one that I've seen mentioned a few times https://kitwind.io/. I'm not going to post the code because I feel like I would be distributing it, but look at the source if you want 🤷♂️. This is the component I'll be using. It's clean and has some badges on it. I think it's pretty close to what I need.
And heres the final layout with our current info:
I think thats a good stopping point, so let's save, commit, and push. Once thats up we can start thinking about our next deploy with will be letting React build the layout for us.
This is part of my experiment to try and write 250,000 words in 2021. It's not accurate and is just meant to loosely track progress.
Current word count: ~3376 / 250,000
Daily average: ~121
Daily average Goal: ~685
Top comments (0)