--- title: "A step by step guide to deploying a headless Hashnode project to Netlify" description: "Learn how to deploy a headless Hashnode project to Netlify with a few simple steps." author: "Tapas Adhikary" published: "2024-02-07" url: "https://hashnode.com/blog/a-step-by-step-guide-to-deploying-a-headless-hashnode-project-to-netlify" tags: ["General Programming","HeadlessHashnode","Netlify","Beginner Developers","Blogging"] --- # A step by step guide to deploying a headless Hashnode project to Netlify Learn how to deploy a headless Hashnode project to Netlify with a few simple steps. Modern technologies provide developers with a plethora of options to build applications based on their needs and use cases. Personalizations and customizations are now the implicit expectations of the end users. The world of blogging and websites is not far from this. Individuals and companies want their blogging sites to carry their brand identities and immense customizations based on their target user base. The traditional blogging platforms are limited in providing this freedom to end users. [Headless Hashnode](https://hashnode.com/headless) is here to solve that problem. It is a *headless CMS designed for building blogs* with all batteries included. The **Headless Hashnode** provides a full-fledged infrastructure to create, review, publish, and manage blog posts. It also provides GraphQL APIs to access your blog data and create a custom blog user interface with any chosen technologies. Exciting, isn't it? Now, you can build your blog's user interface(the blog front end) with your favourite user interface technologies like ReactJs, Angular, Next.js, Astro, and anything else. If you are interested in learning how to use **Headless Hashnode**'s GraphQL APIs and infrastructure with a web framework like Astro or Remix, we have published a couple of articles on them already: * [Building a blog with Astro and Headless Hashnode GraphQL APIs](https://hashnode.com/blog/building-a-blog-with-astro-and-headless-cms) * [Building a blog with Remix and Headless Hashnode GraphQL APIs](https://hashnode.com/blog/building-a-blog-with-remix-and-headless-hashnode-graphql-apis) > Did you know Hashnode created an optimized open-source blog starter kit utilizing Next.js, TailwindCSS, and Headless Hashnode? Check it out [here](https://github.com/Hashnode/starter-kit) if interested. In this article, we will move one more step ahead to learn how to deploy a Headless Hashnode project on **Netlify** to make your blog front end accessible publicly. ## Setting up your project on Netlify Netlify is a popular cloud solution that enables developers to deploy front-end applications and back-end services as serverless functions. We will deploy a blog front-end developed with Astro and Headless Hashnode on Netlify. [Here](https://github.com/atapas/astronode) is the application's source code we plan to deploy. > Please note: Deployment steps of apps developed with any other web frameworks will be exactly the same as we will see below. A few minor changes we will point out as we cover the steps. Please open your browser and go to the URL: [https://www.netlify.com/](https://www.netlify.com/). If you have an account with Netlify, please log in. Otherwise, sign up to create an account and log in. For this article, let's assume we log in with GitHub. ![Netlify login page](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534607060/6ee47d91-df76-4a3d-a1d4-47c07a54a8f6.png align="center") After logging in, you will find a **Sites** option in the left-side navigation bar. Please click on the **Sites** option to add a new site to deploy. ![Netlify Interface - Click on Sites](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534631922/fb1828a0-12c8-477e-94ad-9498cd1d2644.png align="center") Now, we will add our project as a new site on Netlify. Please click the **Add new site** button and select the option to **Import an existing project**, as shown in the image below. In the next step, we must connect to our remote code repository and select the project we want to deploy. ![Import Existing Projects](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534664496/5f4aafd8-bb92-4a2f-bbdf-8c67b6a96ca4.png align="center") ## Deploy the project on Netlify The **astronode** Blog project's source code is on GitHub. So, we need to follow the steps to Deploy with GitHub. As shown in the image below, there are multiple ways to connect to your remote repositories depending on where they are situated, i.e., GitHub, GitLab, BitBucket, or Azure. In our case, please click on the button to **Deploy with GitHub**. ![Deploy With GitHub](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534708854/f4526577-90ac-4982-86bb-0c0a85b588aa.png align="center") As we had logged in to Netlify using the GitHub credentials, we will not be asked to provide the credentials again. In the next step, you need to select the project to deploy. Please search and select the project to deploy. ![Select your project](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534741836/8d2c3774-3a5c-47f6-bf25-904bac1687b6.png align="center") In this step, we have to configure the deployment based on the type of project we are deploying. In most cases, Netlify will automatically pick the required settings, so you do not have to edit most parameters in the screen below. However, there may be situations where you need to. For example: * You may want to deploy a branch other than the **main** branch. That time, you need to select the respective branch to deploy. * At times, the deployable source code could be inside a subdirectory. In that case, you need to provide the path to the base directory of the source code in the repository. * The build command will be populated from your project's **package.json** file. In case you want to customize it, you can do so by changing the default value. * When a web project gets built, it manages its deployable files in an output folder. The usual name the frameworks use for it is dist. However, it could be different sometimes, and Netlify may not be aware of it. Then, you need to provide the publish directory name. * If your project uses a serverless function, you can provide the directory name where those functions reside in your codebase. For Netlify functions, the default directory is **netlify/functions**. * Last, if your project uses any Environment Variables, you can add them in the deployment setting. In our case, we do not have any. We have nothing to modify as Netlify correctly identified our Astro project's deployment settings. We will click the **Deploy astronode** button to proceed to the next step. ![Provide Deploy Parameters](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534769498/b60f0911-3e1b-43c7-9eeb-ec498a89ec5f.png align="center") In the next step, we can see the status of the project building. The project must build successfully on the Netlify cloud environment before being publicly deployed. ![Building Deploy](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534795007/be0c4418-34af-4d29-b997-42e5e656cf3a.png align="center") You can observe the project building log at any point in time. It is useful to diagnose a build failure in the deployment process. ![Deploy Log](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534816956/5a8ed916-87d8-4036-8f2b-453c361034b9.png align="center") ## Site configuration on Netlify for your project Once the build is successful, Netlify will automatically publish the project and provide us with a public URL to access the project. This URL will be a subdomain of **netlify.app** domain. You can map your custom domain to this subdomain from Netlify's site configurations. ![Success Build](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534840652/efb8fc0b-36be-4b24-bdfe-656a9b8eaeaa.png align="center") When we click on the domain link and access it on the browser, we see the [astronode blog](https://hashnode.com/blog/building-a-blog-with-astro-and-headless-cms) page rendered successfully. ![Website publicly available](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534861630/9592db9c-ec47-43e9-a7e3-96b170b4351a.png align="center") Have you noticed the application URL closely? As it is randomly generated, the texts in the URL are not easy to remember. Netlify allows you to customize the name to something you'd prefer. You can initiate the change by clicking the **Site configuration** button. ![Site Config](https://cdn.hashnode.com/res/hashnode/image/upload/v1702535121321/175758ee-6ec5-40e7-9d7d-0cd6f9848b8a.png align="center") Then click on the **Change site name** button. It will open up a popup for you to enter the new name. ![Change Site Name](https://cdn.hashnode.com/res/hashnode/image/upload/v1702534887345/dff3833a-34d8-469a-93f3-d26e941db986.png align="center") Provide a name that works best for you. Please note that Netlify will check the name's availability and assign it to you only if it is available. Otherwise, you have to select something else. For example, the **astronodeblog** name was available in our case. ![Give a suitable subdomain name](https://cdn.hashnode.com/res/hashnode/image/upload/v1702535144987/8e6e62cd-5cee-4184-b319-c90e84064d19.png align="center") That's it. Now, you should be able to access the blog front end of the Headless Hashnode project on the new URL, i.e., [https://astronodeblog.netlify.app](https://astronodeblog.netlify.app). ## The final configuration needed on the Hashnode The final thing left is to let Hashnode know about your blog frontend URL. * Got to your blog dashboard on Hashnode. * Browse to the **Advanced** option from the navigation menu. * Enable the **Headless Mode** by toggling the switch button. * Enter the **URL** of your blog frontend(ensure to provide the URL without the **https://** part). * Save the changes. ![Hashnode Configurations](https://cdn.hashnode.com/res/hashnode/image/upload/v1702959136721/4e364879-8285-4d7e-806b-6f527a851b1f.png align="center") That's it. You have successfully deployed your headless hashnode project on Netlify and configured it with the Hashnode ecosystem. ## Conclusion I hope you found the article insightful and will help you deploy the blog front end of your Headless Hashnode project on Netlify. Headless Hashnode is a compelling [**headless CMS for bloggers**](https://hashnode.com/blog/the-ideal-headless-cms-for-blogs) and companies to be creative on the data and infrastructure that provides many smart features. If you want to learn more about comparing Headless Hashnode with other headless CMS available, we strongly recommend [**this read**](https://hashnode.com/blog/the-ideal-headless-cms-for-blogs). See you with the next article soon.