DEV Community: Yunus Ertürk

Use Custom Domain Email On Gmail, with ImprovMX and Sendgrid

Yunus Ertürk — Sun, 29 Sep 2024 09:50:16 +0000

Creating a professional email address using your domain or company's domain name is crucial to publishing credibility for your business or personal brand. In this guide, we'll walk you through setting up a custom email using ImprovMX for email forwarding and SendGrid for sending emails. This approach is straightforward, cost-effective, and doesn't require you to host your own mail server. You can make it totally for free. And i will make you with this guide to my own domain yunuserturk.com

Why Use ImprovMX and SendGrid?

ImprovMX is a fantastic tool for email forwarding. It allows you to receive emails sent to your custom domain and forward them to your existing email address, all for free. On the other hand, SendGrid provides a robust and reliable solution for sending emails, with powerful APIs that allow you to manage email sending easily. And these are not too much technical stuff to achieve.

What You'll Need

Before we dive into the setup, here are the prerequisites:

A registered domain name: If you don't have one, you can purchase one from domain registrars like Namecheap or GoDaddy.
ImprovMX account: Sign up for a free account.
SendGrid account: Sign up for a free account.
Gmail account. I'm sure that you already have 🙂

Step 1: Set Up Email Forwarding with ImprovMX

1. Sign in to ImprovMX

After signing up, log in to your ImprovMX account.

2. Add your domain

Enter your domain name in the ImprovMX dashboard. ImprovMX will provide you with MX records that you'll need to add to your domain's DNS settings.

3. Update DNS records:

You will see this screen on ImprovMX.
Go to your domain registrar's DNS settings (this is usually found in the domain management section).
Add the MX records provided by ImprovMX. These records should look something like:
- MX1.improvmx.com
- MX2.improvmx.com

Set the priority to the values you see.

Create forwarding rules:

Back in ImprovMX, create a forwarding rule. This will typically be something like hello@yourdomain.com forwarding to your personal email address.

Verify your setup: Once the DNS records propagate (this can take a few minutes to 48 hours), you can send a test email to your new custom address to ensure it's being forwarded correctly.

Step 2 (Easy Way): Set Up Gmail for Sending Emails

Yo need your account 2FA enabled

For this method to work, first enable your google accounts 2FA and follow this link to create an app password -> https://myaccount.google.com/apppasswords

Create an app password

Create an App Password

Google will verify your ownership with this app password. Select "Other (Custom name)" under app, and type "My Domain" as the name. Hit "Generate". Copy and keep it in a safe place!

Add your email to GmailGo to Gmail -> Settings -> Accounts and Import. Then, select "Add another email address you own" under Aliases.

Fill in your sender's information

Set your forwarded email (your alias) and your sender's name. Untick "treat as an alias".

Fill in your email informations

SMTP: smtp.gmail.com, port is right already.\
Username: your gmail address (incl. @gmail.com)\
Password: It is the password you generated on Step 2.

Confirm ownership

You will receive an email from Gmail asking you to confirm ownership with a code. Open the link, click Confirm, and you are all set!

Send emails from your alias

Now you can just select your alias in the list when you compose a new message.

Step 2 (Harder but Better) : Set Up SendGrid for Sending Emails

Sign in to SendGrid and Verify your domain

In SendGrid, navigate to the "Sender Authentication" section.

Choose "Authenticate Your Domain" and follow the prompts to add the necessary DNS records to your domain.

These will include CNAME, TXT, and possibly MX records depending on your setup.

After you edit your DNS settings with these setup you will verify and see this message

Create an API key:

Go to "API Keys" under the Settings menu in SendGrid.

Click "Create API Key" and give it a name (e.g., "Custom Email API Key").

Save the generated key somewhere secure; you'll need it later.

Step 3: Setup Your Custom Email on Gmail

Now that you've set up ImprovMX for forwarding and configured SendGrid for sending emails, the final step is to add your custom email address to Gmail. This will allow you to send and receive emails using your new domain directly from your Gmail interface. You can see the images above for gmail settings.

Open Gmail Settings

Go to the Accounts and Import Tab

In the settings menu, click on the Accounts and Import tab.\
Scroll down to the Send mail as section and click Add another email address.

Enter Your Custom Email Address

A new window will pop up. Enter your name and the custom email address you set up (e.g., hello@yourdomain.com).\
Uncheck the option to Treat as an alias if you want to keep this email separate from your primary Gmail account.

Configure SMTP Settings

In the next step, you'll need to enter your SMTP server settings:\
SMTP Server: smtp.sendgrid.net\
Port: 587 (or 465 for SSL)\
Username: apikey\
Password: Enter your SendGrid API Key here.\
Click Add Account to save the settings.

Verify Your Email Address

Gmail will send a verification email to your custom email address.\
Since you've set up ImprovMX for forwarding, this email should arrive in your Gmail inbox.\
Open the email and click the verification link, or enter the confirmation code provided.

Set as Default (Optional)

If you want to use your custom email as the default sending address, go back to the Accounts and Import tab in Gmail settings.\
Find your custom email under the Send mail as section and click Make default.

Step 4: Test and Verify Your Setup

With everything set up, send a test email from your custom domain to ensure it's working correctly. You should be able to send and receive emails from your custom address directly within Gmail.

Now I can both send with my custom domain using both gmail and sendgrid services. If you are not a tech guy you can use gmails service, but I recommend to go with sendgrid!

Write me anything if you need! Happy good days.

How to Host WordPress for Free on Vercel: A Step-by-Step Guide

Yunus Ertürk — Wed, 20 Dec 2023 12:57:47 +0000

Are you tired of the huge bills that come with hosting your WordPress website and want to host WordPress for free? The world of website hosting is evolving, and I'm here to guide you into host WordPress for free. In this comprehensive guide, I'll explore the exciting possibilities of hosting a WordPress site on Vercel using a Static Headless approach---revolutionizing your web hosting experience without denting your budget.

By the way, I'm Yunus, a passionate tech enthusiast, I'm writing about tech, building digital products and design. for fellow enthusiasts, aspiring digital creators, and design enthusiasts. Join me and Follow me on twitter on this journey of exploring the intersections of technology, product development, and design, as every piece unfolds a narrative of creativity and functionality in the digital realm.

Traditionally, hosting a dynamic WordPress website could burn a hole in your pocket. Due to the infrastructure needed to handle dynamic content and database queries. However, the landscape is changing, and we're about to embark on a journey that transforms your WordPress site into a lean, mean, static machine hosted on Vercel's serverless platform.

Join us as we unravel the secrets of static websites, explore the concept of a Static Headless WordPress, and delve into the powerful world of Vercel. By the end of this guide, you'll not only understand the benefits of this approach but also have the knowledge to successfully host WordPress for free on Vercel without spending a dime. Let's turn the page on expensive hosting and usher in a new era of cost-effective, high-performance WordPress websites. Welcome to the future of hosting---welcome to hosting WordPress for free on Vercel.

Understanding Static Websites: Embracing Simplicity for Speed and Security

Now that we've set the stage for a budget-friendly WordPress hosting adventure, let's dive into the fascinating realm of static websites. Imagine a website that doesn't rely on complex server-side processing for every user request---a website that is lightning-fast, secure, and remarkably efficient. That's the essence of a static website.

In simpler terms, a static website is like a snapshot of a traditional website. It consists of pre-rendered HTML, CSS, and JavaScript files, eliminating the need for on-the-fly content generation with every user interaction. This simplicity brings forth a multitude of advantages:

Speed: Static websites load faster because there's no server-side processing delay. Your visitors experience quicker page loads, making for a smoother and more enjoyable browsing experience.
Security: With reduced dynamic functionality, static sites have a smaller attack surface, making them inherently more secure. Say goodbye to many common security vulnerabilities associated with dynamic content.
Scalability: Scaling a static website is a breeze. Whether you have ten or ten thousand visitors, the response time remains consistently high.

Is WordPress a Static Platform?

Now, you might be wondering, "How does this relate to WordPress?" Traditionally, WordPress relies on dynamic content, generating pages on-the-fly from a database each time a user requests them. While this approach is flexible, it can lead to slower load times and increased server loads, especially as your website grows.

However, the magic lies in transforming your dynamic WordPress site into a static one. By doing so, you retain the simplicity and speed of a static website while still enjoying the familiar WordPress experience. This shift not only enhances performance but also opens the door to cost-effective hosting solutions, which we'll explore further in this guide.

So, buckle up as we navigate the transformative journey of making WordPress static and unleash the full potential of a faster, more secure, and budget-friendly website hosting experience on Vercel. The days of compromise between performance and affordability are over; let's make your WordPress site truly dynamic without breaking the bank.

Making WordPress Static: Transforming Dynamism into Simplicity

So, you're ready to embark on the journey of making your WordPress site static? Fantastic! Let's break down the process step by step, transforming your dynamic WordPress website into a sleek and efficient static version.

1. Setting Up a Local WordPress Environment with Local by Flywheel:

Download and Install Local: Download and install the Local by Flywheel application on your computer. This user-friendly tool makes it easy to create and manage local WordPress environments.
Create a New WordPress Site: Using Local, set up a new WordPress site locally on your computer. This step allows you to work on your website without affecting the live version.

2. Developing Your WordPress Website Locally:

Customize Your WordPress Site: Build and customize your WordPress site according to your preferences. This is your opportunity to design, tweak, and perfect your website's look and feel.
Migrate Your WordPress Site: If your WordPress site is currently hosted elsewhere, use the "All-in-One WP Migration" plugin to seamlessly migrate it to your local environment. Install the plugin on your existing WordPress site, export the site as a file, and then import it into your local environment using Local.
Get Done with Local WP: I created an example WordPress website and will show you the steps.

3. Exporting Your WordPress Site to Static Files with WP2Static:

We will use the WP2Static plugin for it. There are some other plugins for it, but I will use this one in this path.

Download and Install WP2Static Plugin

In your WordPress dashboard, install the WP2Static plugin. This tool is crucial for converting your dynamic site into a static one.

Configure WP2Static: Set up WP2Static to export your WordPress site as static files. The most important thing in this step is to fill your new WordPress domain. Because we need to change the page domains to the actual domain that we will use for the WordPress website.

Generate Static Files: Let WP2Static do its magic. It will generate static HTML files, CSS, and other assets that represent your WordPress site without the need for server-side processing.

4. Creating a GitHub Repository:

Set Up a GitHub Account: If you don't have one, create a GitHub account. This will be the platform where you store and manage the static files of your WordPress site.
Create a New Repository: Initialize a new repository on GitHub. This will serve as the central hub for your static WordPress site's files.

5. Pushing Static Files to the GitHub Repository:

Commit and Push Changes: Using Git commands or a GUI client, commit and push the static files to your GitHub repository. This step makes your static WordPress site accessible from anywhere.

6. Deploying Your WordPress Site on Vercel and Host WordPress for Free:

Create a Vercel Account: If you haven't already, sign up for a Vercel account. It's free and provides an excellent platform for hosting static sites.

Create A New Project: On your vercel dashboard, create a project for the WordPress website.

Import Your GitHub Repository to Vercel: Connect your GitHub repository to Vercel. This establishes a link between your static WordPress files and the Vercel hosting platform.

Configure Deployment Settings: Fine-tune deployment settings on Vercel according to your requirements. This includes specifying the branch to deploy and setting up custom domains if needed.

Deploy Your WordPress Site: Initiate the deployment process on Vercel. Watch as your static WordPress site goes live on the Vercel platform.

Congratulations! You've successfully transformed your dynamic WordPress site into a static masterpiece and deployed it on Vercel---all without spending a penny on hosting. Now you can Host WordPress for Free. In the next sections, we'll explore the nuances of GitHub, version control, and the deployment process in more detail. Let's keep the momentum going!

FAQ: Navigating the Host WordPress for Free Journey

Q1: Why should I consider hosting my WordPress site on Vercel?

A: Hosting your WordPress site on Vercel brings tones of benefits, including speed, scalability, and cost-effectiveness. Vercel's serverless platform ensures high performance without the traditional hosting expenses. You can Host WordPress for Free on Vercel.

Q2: Is the migration process complex, especially for non-tech-savvy users?

A: Not at all. The migration process is designed to be user-friendly. With plugins like "All-in-One WP Migration" and step-by-step guides, even those without extensive technical knowledge can successfully navigate the transition. But still you have to knowledge of github version control and how-to make commit, push and deploy.

Q3: Can I still use WordPress plugins and themes on a static site?

A: While some dynamic functionality may be limited in a static environment, many plugins and themes are compatible. The key is to choose those that enhance static site performance. If you want to Host WordPress for Free on Vercel, you won't create a dynamic website, like comments, e-commerce etc.

Q4: What happens to my database during the migration to a static site?

A: The static site approach removes the need for a dynamic database. During migration, the content is pre-rendered and stored as static files, eliminating the need for constant database queries and updates.

Q5: How does version control benefit my WordPress site on GitHub?

A: Version control with GitHub allows you to track changes, collaborate efficiently, and roll back to previous versions if needed. It provides a secure and organized way to manage your WordPress site's evolution.

Q6: Are there limitations to the types of websites that work well with Host WordPress for Free on Vercel?

A: Static Headless WordPress on Vercel is versatile and suitable for various types of websites, from blogs to portfolios. However, websites heavily reliant on real-time dynamic content may need additional considerations.

Q7: Is Vercel's Host WordPress for Free is sufficient for my site?

A: Vercel's free hosting tier is excellent for small to medium-sized websites. For larger sites with high traffic, consider their affordable paid plans for enhanced performance and additional features.

Q8: Can I still use Vercel if my WordPress site relies on e-commerce plugins?

A: While certain e-commerce plugins may have limitations in a static environment, there are static-friendly alternatives. Consider evaluating plugins compatible with static sites or explore separate solutions for dynamic features.

Q9: What if I encounter issues during deployment on Vercel?

A: Vercel offers comprehensive documentation and a helpful community. If issues persist, their support team is responsive and ready to assist, ensuring a smooth deployment process.

Q10: Is it possible to revert to a dynamic WordPress site after migrating to static on Vercel?

A: While the migration is generally one-way, keeping a backup of your dynamic WordPress site is advisable if you ever decide to revert. Be sure to plan and test thoroughly before making significant changes. But always the static website will be rendered by the main dynamic website of WordPress. So you need to have the dynamic website allways. In this case it will be on your own local system.

Feel free to reach out if you have additional questions or need further clarification on any aspect of the Host WordPress for Free journey. I will be happy to guide you!

What Kind of Websites Work Best with Static Headless WordPress?

Static Headless WordPress on Vercel is a powerful solution that suits a variety of website types, but it's essential to understand its strengths and limitations. Here's a guide on which types of websites work best and where you might encounter challenges:

Personal Websites:

Ideal: Static Headless WordPress is exceptionally well-suited for personal websites. The static nature enhances speed and security, providing an excellent user experience for readers.

Portfolio Websites:

Ideal: If you're showcasing your work or building a portfolio, a static site offers a fast and reliable way to display your content. Vercel's hosting ensures your portfolio loads quickly, impressing potential clients or employers.

Business Websites:

Ideal: Business websites with static content, such as service descriptions, contact information can benefit from the simplicity and speed of Static Headless WordPress.

Informational Websites:

Ideal: Websites providing information without the need for real-time updates or user-generated content can leverage the efficiency of a static approach.

Landing Pages:

Ideal: Static sites are perfect for landing pages where quick loading times are crucial. Whether you're promoting a product, event, or service, the speed of a static site enhances user engagement.

Documentation Sites:

Ideal: Static Headless WordPress is an excellent choice for documentation sites, providing a fast and reliable platform for users to access information.

Educational Websites:

Ideal: Websites offering educational content, course descriptions, and general information can benefit from the speed and security of a static environment.

However, there are scenarios where a static approach may not be the best fit:

E-commerce Websites:

Challenges: E-commerce sites with dynamic product listings, real-time inventory updates, and interactive shopping carts might face limitations with the static approach.

User-Generated Content (UGC) Websites:

Challenges: Websites heavily reliant on user-generated content, such as forums or social platforms, may find it challenging to implement real-time updates and dynamic interactions.

Websites with Dynamic Comments:

Challenges: If your website relies on dynamic comments on posts or pages, a static approach may not be the most suitable, as it lacks the real-time interaction required for comment sections.

In summary, Static Headless WordPress on Vercel excels in scenarios where content remains relatively static and doesn't require constant updates or real-time interactions. Understanding the nature of your website's content and functionalities will help you determine whether the static approach aligns with your goals.

8 Best Tips for Finding Freelance Developer Jobs

Yunus Ertürk — Sat, 19 Nov 2022 18:17:21 +0000

There are a number of ways to get started in freelancing, but finding quality development jobs can be a challenge. Here are a few tips to get you started on the right track:

Job postings on online job boards or freelancing websites.

Online freelancing job boards are the quickest way of finding projects. There are many different online job boards and freelancing websites available. Some popular online job boards include Indeed, Monster, and Dice. To find freelancing developer jobs on these websites, enter relevant keywords, mainly freelance, into the search bar.

Network with other developers and let them know you're looking for freelancing work

You can connect with other developers through online forums or social media platforms such as GitHub or Twitter.

Search for companies that use the technology you're proficient in

If you're skilled in a particular technology or programming language, you can search for companies that use that technology on job boards or freelancing websites. You can also search for companies that use that technology on LinkedIn.

Reach out to companies or organizations directly and inquire about freelancing opportunities

Another option is to reach out to companies or organizations directly and inquire about any freelance opportunities that may be available. This can be done by sending a cold email or LinkedIn message to the company.

Attend industry events or meetups relevant to your skillset

You can also attend developer meetups or events in your area. This is a great way to network with other developers and let them know you're available for freelance work.

Create a solid online presence by having an up-to-date portfolio website or blog

Ensure your portfolio or website is up-to-date and includes examples of your work. This will help you showcase your skillset and attract potential clients.

Keep your skills up-to-date.

Use online resources such as online courses or tutorials to keep your skills up-to-date. This will make you more attractive to potential clients.

Be active on social media.

Make sure you're active on social media platforms such as Twitter and LinkedIn. This will help you build your online presence and attract potential clients.

This post firstly published on freelancerpath.

Build Your Own Cloud Storage

Yunus Ertürk — Tue, 08 Nov 2022 20:51:45 +0000

Building a strong brand is something every business or individual needs to do. It's not just about having a memorable logo or tagline, but ensuring that you are remembered by your audience and clients for the right reasons. We're here to help you develop an effective branding strategy and create an identity that will make you stand out from the crowd.

Your personal brand and freelancing business are only as strong as the tools you have available to communicate your value with potential clients. This makes an online storage solution like nextcloud that much more valuable, because it allows you to store, organize and share all of your files from any device and add security features such as two-factor authentication through services like Google Authenticator. Best of all, it's simple to get set up, and in this article we'll take you through all of the steps necessary to use nextcloud to build your own cloud storage on your own domain.

What is Cloud Storage?

Cloud storage is a type of web hosting. Like traditional hosting, it involves storing files on a server and making them accessible to the public. Unlike traditional hosting, however, cloud storage enables you to store your data remotely and access it from anywhere as long as you have an internet connection. You can also create private accounts that are only accessible by the account's owner.

Cloud storage is ideal for businesses because they need to store their data without having to worry about managing hardware or setting up servers. And when you communicate with your clients you always need to send big files. In this scenario, cloud systems are the only way. If you don't want to send files with google drive, onedrive, or use the systems like wetransfer you need to build your own branded cloud storage.

What are the Differences Custom Cloud Storage vs Others

Cloud storage is the backbone of any freelancer brand's business efforts. But there are many types of cloud systems with different features and limitations that can make it difficult to decide which one is best. Some services offer limited storage space, others only allow you to upload a few files at a time, and some charge per gigabyte. DIY custom cloud storage with nextcloud offers much more flexibility, allowing you to scale your storage up or down as needed without any cost increases. And the most important point is when you send a file to a customer, you are sending it under your own domain and your own cloud system. It's a nice action to show your customers your brand's strong identity.

Benefits of Building Own Cloud

Building your own cloud storage is like having your own private wetransfer -- only branded on your own domain. You'll be in complete control, and it'll cost you less money than paying for cloud systems monthly fee. To create your own cloud, you'll need the help of server and client software. There are several solutions that you can choose from the market but we'll discuss NextCloud in this post. I'm personally used this solution about 4-5 years and I like it.

Custom Cloud Solution: Nextcloud

Nextcloud is similar to ownCloud, but with a few differences. Nextcloud is an upgraded version of ownCloud, created by duplicating (forking) it and developing the new version separately. It offers some great collaboration tools, allowing you to use one of their DIY cloud storage systems. They also have apps for smartphones on both Android and iOS -- which is perfect if you want to access your data wherever you are. It is different from other services like Google Drive and Dropbox because it's not hosted on servers outside of your direct control. For users seeking more control over how and where their data is stored, Nextcloud is a great choice.

Is it Free

Yes, you can install it on your own server and can use free. It has its own premium pricing but I'm writing this post for freelancers and solo business owners. So you don't need team pricing or extra features. Just upload your files and send them to your customers. It is my usage also.

How to Install

NextCloud has a huge documentation on their website, here is the link: https://docs.nextcloud.com/server/latest/admin_manual/installation/index.html

But if I make it summarize, here is the installation steps with web installer file;

The Web Installer is the easiest way to install Nextcloud on a web space. It checks the dependencies, downloads Nextcloud from the official server, unpacks it with the right permissions and the right user account. Finally, you will be redirected to the Nextcloud installer.

Right-click here and save the file to your computer
Upload setup-nextcloud.php to your web space
Point your web browser to setup-nextcloud.php on your webspace
Follow the instructions and configure Nextcloud
Login to your newly created Nextcloud instance!

You can find further instructions in the Nextcloud Admin Manual.

Note:

Installer uses the same Nextcloud version as available for the built in updater in Nextcloud. After a major release it can take up to a month before it becomes available through the web installer and the updater. This is done to spread the deployment of new major releases out over time.

Features

Share files very quickly with your own domain.
Create folders for your different clients.
Share files with password.
Easy collaboration.
Store on your own server.
Built-in apps. (More than 100+)

Using

I don't tell you how to use it here, but it's very easy. Just create a file, upload your file, and copy the share link. Here is a huge documentation about usage of nextcloud. https://nextcloud.com/files/

Pros and Cons of NextCloud

First, let me tell you that these pros and cons are just my thoughts. You can search and find your own pros and cons.

Pros;

Very easy to use
Quick installation
Smooth process
Security options

Cons;

Enterprise pricing is too expensive.
You use your own hosting storage.

Conclusion

Nextcloud is a great solution if you want to build your own cloud storage and make your personal brand powerful. It is very easy to start and creates a huge difference to your personal brand in a positive way.

If you have a different process for using cloud systems please mention it and let us talk about that.

How to Create a Blog with NextJS, Notion, and Notion API

Yunus Ertürk — Fri, 28 Oct 2022 14:41:55 +0000

In this post, I want to try how we can create a blog management system using notion as a database. I have created a post on how to create a blog with airtable, I used airtable in that project. Now I'm doing it with notion.

I wrote this post to my own blog first, and I want to publish it here too.

At first, we can find everything about notion; https://developers.notion.com/ address

Create a Notion Integration for Our Blog

I have looked at the documentation and let's start. Firstly we should create an integration from https://www.notion.so/my-integrations

Create a new integration on this page. I have created an integration named myblog, and these are my settings;

After these steps notion will give you a notion token, copy this token to a secure place, and we will use it for connecting our data.

After that, we have to create a page and convert it to a database to use for our blog. I have created a notion page -- database full page. This is what I get;

There is a share button top right, Click on the Sharebutton and use the selector to find your integration by its name, then click Invite.

Our integration has an access to our database now, last step we need the database id. It's the part of your URL;

Mine is; https://www.notion.so/yunuserturk/f9dfc334e89e4c2289b9bc98884b5e80

And the database id is; f9dfc334e89e4c2289b9bc98884b5e80

Now we have to create our app and we can use these notion access.

Create a NextJS App

The easiest way to get started with Next.js is by using create-next-app .

Create a project with VS Code, open the terminal and use the command; npx create-next-app

Install tailwindcss;

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Create a sketchy UI, I copied the code from the airtable project.

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
          <h1 className="font-bold text-2xl">Welcome to my blog</h1>
          <div className="flex flex-col p-5 rounded-lg border-2 border-gray-200 mt-10">
            <h2 className="text-xl font-bold">Post Title</h2>
            <div>Post Content will be here</div>
            <span className="text-sm mb-6">Post Date</span>
          </div>
        </div>
      </main>
    </div>
  );
}

How to Use Notion API and Show the Content

Our homepage is ready, now we have to fetch the data to show it on our page. Let's install notion client SDK with npm install @notionhq/client, run this command on terminal. Create a file lib>notion.js and we will use our database here. With the help of the documentation, I created a starter code.

import { Client } from "@notionhq/client";

const notion = new Client({
  auth: process.env.NEXT_PUBLIC_NOTION_TOKEN,
});

export const getDatabase = async (databaseId) => {
  const response = await notion.databases.query({
    database_id: databaseId,
  });
  return response.results;
};

export const getPage = async (pageId) => {
  const response = await notion.pages.retrieve({ page_id: pageId });
  return response;
};

export const getBlocks = async (blockId) => {
  const blocks = [];
  let block;
  while (true) {
    const { results, next_block } = await notion.blocks.children.list({
      start_block: block,
      block_id: blockId,
    });
    blocks.push(...results);
    if (!next_block) {
      break;
    }
    block = next_block;
  }
  return blocks;
}

We'll import this to the index page and fetch the data and show the posts on the home page. With the notion API, getpage function only fetches the properties of the page. We can't retrieve the page blocks. We have to create another function and use API for retrieving page content. Notion called them blocks and has another function for it.

My final index.js page is like that;

import Head from "next/head";
import { getDatabase } from "../lib/notion";
import Link from "next/link";

export default function Home({ posts }) {

  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
          <h1 className="font-bold text-2xl">Welcome to my blog</h1>
          {posts.map((post) => {
            const date=new Date(post.created_time).toLocaleString("en-Us",{
              month: "long",
              day: "numeric",
              year: "numeric",
              })
            return (
              <div className="flex flex-col p-5 rounded-lg border-2 border-gray-200 mt-10" key={post.id}>
                <h2 className="text-xl font-bold">{post.properties.Name.title[0].plain_text}</h2>
                <span className="text-sm">{date}</span>
                <Link href="/[post]" as={`/${post.id}`}>
                  <a className="text-sm">Read more</a>
                </Link>
              </div>
            );
          })}
        </div>
      </main>
    </div>
  );
}

export const getStaticProps = async () => {
  const database = await getDatabase("f9dfc334e89e4c2289b9bc98884b5e80");

  return {
    props: {
      posts: database,
    },
    revalidate: 1,
  };
};

Notion gives us the blocks with API with plenty of properties. As you wish you can use which of them you want. But I just use the text and just for these blocks; paragraphs and headers. You can adjust the blocks you will use according to the project you are doing. (We will use it on the single post page.)

Here is the single post page file;

import { getDatabase, getPage, getBlocks } from "../lib/notion";
import Head from "next/head";

const renderBlock = (block) => {
  const { type } = block;
  const value = block[type];

  switch (type) {
    case "paragraph":
      return <p className="mb-4">{value.rich_text[0].plain_text}</p>;
    case "heading_1":
      return <h1 className="font-bold text-3xl  mb-2">{value.rich_text[0].plain_text}</h1>;
    case "heading_2":
      return <h2 className="font-bold text-2xl  mb-2">{value.rich_text[0].plain_text}</h2>;
    case "heading_3":
      return <h3 className=" font-bold text-xl mb-2">{value.rich_text[0].plain_text}</h3>;
  }
};

export default function Post({ post, content }) {
  const date = new Date(post.created_time).toLocaleString("en-Us", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });
  return (
    <div>
      <Head>
        <title>{post.properties.Name.title[0].plain_text}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
          <h1 className="font-bold text-2xl">{post.properties.Name.title[0].plain_text}</h1>
          <span className="text-sm">{date}</span>
          <img src="<https://picsum.photos/800/200>" alt="random image" className=" max-w-full" />
          <div className="mt-10">
            {content.map((block) => {
              console.log(block);
              return <div key={block.id}>{block.type === "page_break" ? <hr /> : <div>{renderBlock(block)}</div>}</div>;
            })}
          </div>
        </div>
      </main>
    </div>
  );
}

export const getStaticPaths = async () => {
  const database = await getDatabase("f9dfc334e89e4c2289b9bc98884b5e80");
  const paths = database.map((post) => {
    return {
      params: {
        post: post.id,
      },
    };
  });
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async ({ params }) => {
  const postId = params.post;
  const post = await getPage(postId);
  const content = await getBlocks(postId);

  return {
    props: {
      post,
      content,
    },
    revalidate: 1,
  };
};

Here is the final post page;

Deployment and the result

I deployed it to vercel finally. It's a very basic use of Nation API, If you create something more different you can use it this way.

You can see al the code from the github repo: https://github.com/yunuserturk/notion-blog

Here is the demo of final result: https://notion-blog-yunuserturk.vercel.app/

How to create a blog with using airtable as a database

Yunus Ertürk — Wed, 20 Jul 2022 17:19:22 +0000

In this post, I want to try how we can create a blog management system using airtable as a database. Airtable is perfect for creating and managing your content. It’s easy to get started and the possibilities are endless! We’ll use react, NextJS as our frontend, and tailwindcss for CSS. We’ll also use git to store all our code in GitHub and deploy it to Vercel. Keep reading to learn how to create your own blog!

I wrote this post to my own blog first, and I want to publish it here too.

You can see all the code from the GitHub repo: https://github.com/yunuserturk/airtable-blog

Here is the demo of the final result: https://airtable-blog-ruby.vercel.app/

What is Airtable?

Airtable is a cloud-based, all-in-one platform that combines the power of a traditional database with the flexibility of a spreadsheet. You can use Airtable to store data, track projects, and collaborate with team members.

Why tailwindcss, react, and nextJS?

Tailwind is a utility-first CSS framework that offers a low-level, atomic approach to building interfaces. In other words, it gives you the raw building blocks (utilities) you need to create designs, without any opinionated styles of their own.

NextJS is a React framework that makes it easy to create server-side rendering React apps. It’s also lightweight and fast, and very effective for websites with lots of pages, which makes it ideal for creating static websites and blogs.

Create a NextJS App

The easiest way to get started with Next.js is by using create-next-app.

Create a project with VS Code, open the terminal, and use the command; npx create-next-app

This is our first app. First, we’ll edit index.js and create a blog home page, and after that create a post page.

I’m creating a very basic UI with tailwindcss;

<main>
  <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
    <h1 className="font-bold text-2xl">Welcome to my blog</h1>
    <div className="flex flex-col p-5 rounded-lg border-2 border-gray-200 mt-10">
      <h2 className="text-xl font-bold">Post Title</h2>
      <div>Post Content will be here</div>
      <span className="text-sm mb-6">Post Date</span>
    </div>
  </div>
</main>

Airtable as a database

Our blog home page is ready, and we need the airtable as a database. I have created an airtable document named myblog and I’ll use these 3 columns; title, content, and date.

How can we fetch the data from airtable?

Airtable has a nice documented API service. https://airtable.com/api

Also, you can check the documentation and see how can you create something different. For now, we just fetch the post title, content, and date.

Airtable has an npm package for development. Firstly we install it on our project. Open the terminal and run this code npm install airtable. After installing the airtable package I’ve created a file under components named getPosts.js, and this is for fetching the data from the airtable.

import Airtable from "airtable";

const AirtableBase = new Airtable({ apiKey: process.env.NEXT_PUBLIC_API_KEY });
const AirtableBase_ = AirtableBase.base(process.env.NEXT_PUBLIC_API_BASE);

const table = AirtableBase_.table("myblog");
let posts = [];

const getPosts = async () => {
  posts = await table.select({}).all();
  const posts_ = posts.map((post) => {
    return {
      id: post.id,
      title: post.fields.title,
      content: post.fields.content,
      date: post.fields.date,
    };
  });

  return posts_;
};

export default getPosts;
You must change your airtable table name and API variables.

Now we have to create a post page to show a single post. Created a [posts].js in the pages folder. And created a sketchy post UI. For now, I’ve created post pages with post IDs. But it’s not the best practice, I will change this function when I’m implementing SEO functions.

This is how is the [posts].js after airtable fetch codes.

export default function post({ post }) {
  return (
    <main>
      <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
        <h1 className="font-bold text-2xl">{post.title}</h1>
        <span className="text-sm">{post.date}</span>
        <img src="https://picsum.photos/800/200" alt="random image" className=" max-w-full" />

        <div dangerouslySetInnerHTML={{ __html: marked(post.content) }} className="mt-10"></div>
      </div>
    </main>
  );
}

export async function getStaticPaths() {
  const posts = await getPosts();
  const paths = posts.map((post) => ({
    params: {
      post: post.id,
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const posts = await getPosts();
  const post = posts.find((post) => post.id === params.post);
  return {
    props: {
      post,
    },
    revalidate: 1,
  };
}

When you create a rich text cell in airtable, airtable gives you the data as markdown data. This is great for us but we have to do some specifications to show it smoothly. First I have installed a package named marked, it helps us to fix that. Open terminal and run command npm install marked. As you can see in the code we should call the package and use it for the blog content data. This works great; <div dangerouslySetInnerHTML={{ __html: marked(post.content) }} className="mt-10"></div>

Deployment and the result

Finally, I deployed it to vercel. It’s a very basic method of using airtable. Anybody can build very different projects like these.

You can see all the code from the Github repo: https://github.com/yunuserturk/airtable-blog

Here is the demo of the final result: https://airtable-blog-ruby.vercel.app/