{"id":6028,"date":"2025-07-12T05:54:26","date_gmt":"2025-07-12T10:54:26","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6028"},"modified":"2025-07-12T05:54:27","modified_gmt":"2025-07-12T10:54:27","slug":"deploy-a-site-with-a-build-process-a-custom-domain-name","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/deploy-a-site-with-a-build-process-a-custom-domain-name\/","title":{"rendered":"Deploy a Site with a Build Process &amp; a Custom Domain Name"},"content":{"rendered":"\n<p>What we&#8217;ve done so far in this series is look at the <em>absolute easiest<\/em> way to take some static files and turn them into a Real Website (one that anyone in the world can see). Then we took things one step further and did the very practical step of putting the code on GitHub, which was then able to update our Netlify-hosted site with changes.<\/p>\n\n\n<div class=\"box article-series\">\n  <header>\n    <h3 class=\"article-series-header\">Article Series<\/h3>\n  <\/header>\n  <div class=\"box-content\">\n            <ol>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/exactly-how-to-deploy-local-files-to-make-a-live-website\/\">Exactly How to Deploy Local Files to Make a Live Website<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/the-simplest-way-to-deploy\/\">The Simplest Way to Deploy Your Own Updatable Portfolio Site<\/a>\n            <\/li>\n                      <li>\n              <a href=\"https:\/\/frontendmasters.com\/blog\/deploy-a-site-with-a-build-process-a-custom-domain-name\/\">Deploy a Site with a Build Process &amp; a Custom Domain Name<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n\n\n\n<p>Now we&#8217;re in Part 3, and we&#8217;ll pick up where we left off once again, and do two more very practical things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use a site-building tool (we&#8217;ll use <a href=\"https:\/\/astro.build\/\">Astro<\/a>)<\/li>\n\n\n\n<li>Use a real domain name<\/li>\n<\/ol>\n\n\n\n<p>Once we&#8217;re done, we&#8217;ll be doing what dare-I-say <em>most<\/em> websites are doing. While we&#8217;re keeping this very beginner-focused, here&#8217;s the general outline for how websites operate: use tools to create files that become websites, place those files in version control, and utilize services to host our site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Build Process<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Why?<\/h3>\n\n\n\n<p>Why slap a build process onto a simple site?<\/p>\n\n\n\n<p>It&#8217;s true: <em>you don&#8217;t always need a build process<\/em>, and I think <em>avoiding<\/em> adding tools is a better lesson than adding them because you think you have to. So I want to be clear here that we&#8217;re doing it here because we&#8217;re <em>learning.<\/em> But here are some reasons why we might:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It can make content management easier. In our case, let&#8217;s build out some of the content with Markdown files, so that adding and changing content is potentially a bit easier and more flexible than editing one big HTML file.<\/li>\n\n\n\n<li>The build process can help slot in additional tools for helping with things like performance, writing in other languages, or doing responsible things like running tests.<\/li>\n<\/ul>\n\n\n\n<p>We&#8217;ll be adding <a href=\"https:\/\/astro.build\/\">Astro<\/a> as the site-building tool for us, so it&#8217;s the tool that will be running the build process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Incorporating<\/h3>\n\n\n\n<p>The trick here is to scaffold a new, bare-bones Astro site, then move the HTML\/CSS\/JavaScript assets from our existing project into place in the Astro project. <\/p>\n\n\n\n<p>Astro is clear that the right way to get started is using the command line. So far in this series, we&#8217;ve avoided the command line, using the GitHub Desktop app to do Git work, where git is natively a command line tool. But we&#8217;ve got no choice here, so let&#8217;s do it. I hope this isn&#8217;t a showstopper for anyone, but I think it&#8217;s outside the scope of this series to explain the command line. Naturally, there is a great course right here: <a href=\"https:\/\/frontendmasters.com\/courses\/linux-command-line\/?utm_source=boost&amp;utm_medium=blog&amp;utm_campaign=boost\">Complete Intro to Linux and the Command-Line<\/a>. The good news is that any operating system will have a free and perfectly serviceable command line app for you to use (like Terminal.app on macOS), and we won&#8217;t need it for long. We just need to get it open, then copy\/paste the command Astro says to run on their homepage:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/terminal.png?resize=1024%2C710&#038;ssl=1\" alt=\"A terminal window displaying a command prompt with the last login time and a command to create an Astro project using npm.\" class=\"wp-image-6504\" style=\"width:669px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/terminal.png?resize=1024%2C710&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/terminal.png?resize=300%2C208&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/terminal.png?resize=768%2C532&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/terminal.png?w=1394&amp;ssl=1 1394w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p>It&#8217;ll ask you a series of questions, where the default answer is likely fine, and you&#8217;ll end up with all the necessary files to run a basic Astro site.<\/p>\n\n\n\n<p><strong>Slightly tricky part here for an absolute beginner:<\/strong> It&#8217;s going to make the Astro site into a folder, and that folder might have a strange, random name (if you didn&#8217;t name it yourself during the scaffolding questions). So in the terminal, you&#8217;ll type <code>cd [name-of-folder]<\/code> to &#8220;move&#8221; into it (&#8220;cd&#8221; is &#8220;change directory&#8221;). From <em>inside<\/em> that folder, now you can type <code>npm run dev<\/code> and it will <em>run<\/em> the Astro site. This is a change from our previous entirely static site. Now, when we&#8217;re <em>working<\/em> on our Astro site, we need to run it like we just did.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"814\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-8.10.11%E2%80%AFAM.png?resize=1024%2C814&#038;ssl=1\" alt=\"\" class=\"wp-image-6505\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-8.10.11%E2%80%AFAM.png?resize=1024%2C814&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-8.10.11%E2%80%AFAM.png?resize=300%2C239&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-8.10.11%E2%80%AFAM.png?resize=768%2C611&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-8.10.11%E2%80%AFAM.png?resize=1536%2C1222&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-8.10.11%E2%80%AFAM.png?resize=2048%2C1629&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">We get lots of little niceties from working this way, like when we edit the code and save, the browser immediately updates to show the changes.<\/figcaption><\/figure>\n\n\n\n<p>Now this looks absolutely nothing like our site, which is expected. We now need to move our HTML\/CSS\/JavaScript into the Astro-scaffolded files. These will be jobs like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML needs to move into <code>.astro<\/code> files to take best advantage of Astro features. So it&#8217;s likey our simple setup will involve porting most of it to an <code>src\/pages\/index.astro<\/code> file.<\/li>\n\n\n\n<li>Moving CSS and JavaScript assets into <code>src\/assets<\/code> and linking them up how Astro likes to do it.<\/li>\n<\/ul>\n\n\n\n<p>It might be useful to look at <a href=\"https:\/\/github.com\/chriscoyier\/my-portfolio\/commit\/632126a8d41843c7a1784956469781e98f5a1d7c\">my Git Commit that does this conversion<\/a>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"796\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-12.59.39%402x.png?resize=1024%2C796&#038;ssl=1\" alt=\"\" class=\"wp-image-6507\" style=\"width:524px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-12.59.39%402x.png?resize=1024%2C796&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-12.59.39%402x.png?resize=300%2C233&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-12.59.39%402x.png?resize=768%2C597&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-12.59.39%402x.png?w=1044&amp;ssl=1 1044w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p>It&#8217;s essentially our job to review the Astro site&#8217;s structure and integrate our existing code into the Astro setup.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Taking Advantage of Astro Features<\/h3>\n\n\n\n<p>Our plan was to build out some of our content using Markdown files. We&#8217;re jamming in this concept because we&#8217;re learning and it&#8217;s interesting. But it&#8217;s also a fairly common need and project requirement. So let&#8217;s do it with the &#8220;work&#8221; section of our portfolio site. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"601\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.15.41%E2%80%AFPM.png?resize=1024%2C601&#038;ssl=1\" alt=\"\" class=\"wp-image-6508\" style=\"width:680px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.15.41%E2%80%AFPM.png?resize=1024%2C601&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.15.41%E2%80%AFPM.png?resize=300%2C176&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.15.41%E2%80%AFPM.png?resize=768%2C451&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.15.41%E2%80%AFPM.png?resize=1536%2C902&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.15.41%E2%80%AFPM.png?resize=2048%2C1202&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p>We&#8217;ve got these six images here. Let&#8217;s flesh out that section and make it actually powered by six Markdown files that link up the image but also have actual information about the project we worked on. This is a portfolio after all! <\/p>\n\n\n\n<p>This is a perfect situation for Astro&#8217;s <a href=\"https:\/\/docs.astro.build\/en\/guides\/content-collections\/\">content collections<\/a>. We can define what we want a work item to be like from a data perspective, then make Markdown files for each item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"766\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-13.21.16%402x.png?resize=1024%2C766&#038;ssl=1\" alt=\"\" class=\"wp-image-6509\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-13.21.16%402x.png?resize=1024%2C766&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-13.21.16%402x.png?resize=300%2C224&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-13.21.16%402x.png?resize=768%2C574&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-13.21.16%402x.png?resize=1536%2C1148&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-13.21.16%402x.png?resize=2048%2C1531&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>You can absolutely do all this work by hand. I might argue that you should. More than once. But I also don&#8217;t want to be ignorant to the AI revolution in how developers are working these days. I also think that fairly rote tasks like this are done usually <em>quite well<\/em> by AI agents. That&#8217;s particularly true here, as we&#8217;re doing something very basic and with-the-grain in a fairly popular framework with good open documentation. <\/p>\n\n\n\n<p>I used an AI agent myself to do this job because I wanted to give it a whirl! I had just heard of <a href=\"https:\/\/jules.google.com\/\">Jules<\/a> from Google so I gave that one a try, but there are so many other choices. I&#8217;ve used Cursor a bunch which just launched <a href=\"https:\/\/cursor.com\/agents\">a web version of agents<\/a> which seems interesting, for example. <\/p>\n\n\n\n<p>I told Jules:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>in index.astro, there is a div with class &#8220;work__container&#8221;. I want to turn that area into an Astro Collection. Each of those images should actually be a markdown file. That markdown file has more stuff in it like a title and description as well as the image.<\/p>\n<\/blockquote>\n\n\n\n<p>I&#8217;m sure it would have been happy to take follow-up instructions and all that, but this single prompt did the job just fine, and it ended up <a href=\"https:\/\/github.com\/chriscoyier\/my-portfolio\/pull\/1\">as a PR (Pull Request) against the GitHub repo we set up<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"925\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.30.21%E2%80%AFPM.png?resize=1024%2C925&#038;ssl=1\" alt=\"\" class=\"wp-image-6510\" style=\"width:605px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.30.21%E2%80%AFPM.png?resize=1024%2C925&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.30.21%E2%80%AFPM.png?resize=300%2C271&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.30.21%E2%80%AFPM.png?resize=768%2C694&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.30.21%E2%80%AFPM.png?resize=1536%2C1387&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.30.21%E2%80%AFPM.png?w=1716&amp;ssl=1 1716w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p>Just a little hand-tweaking of that new <code>Work.astro<\/code> file, and we have a nice new section that will be easy to update in the future by simple editing Markdown files. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"736\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.48.28%E2%80%AFPM.png?resize=1024%2C736&#038;ssl=1\" alt=\"\" class=\"wp-image-6513\" style=\"width:774px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.48.28%E2%80%AFPM.png?resize=1024%2C736&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.48.28%E2%80%AFPM.png?resize=300%2C216&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.48.28%E2%80%AFPM.png?resize=768%2C552&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.48.28%E2%80%AFPM.png?resize=1536%2C1104&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.48.28%E2%80%AFPM.png?resize=2048%2C1473&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Updating Netlify<\/h2>\n\n\n\n<p>We need to tell Netlify that our site is different now! No longer is it entirely static files. It&#8217;s true that Astro <em>makes<\/em> totally static files that can essentially be served in the same way, but when you use a site-building tool like Astro, the approach is to have the build process run when you deploy the site. That might sound a little strange if you&#8217;re learning about this for the first time, but it&#8217;s true. <\/p>\n\n\n\n<p>When Astro builds your site for you locally, it builds your website in a folder called <code>dist<\/code>. You can see that in the <code>.gitignore<\/code> file that came into existence when we scaffolded Astro, dist is in there, which means &#8220;do not track any of the files in that folder in Git&#8221;, meaning they don&#8217;t go to GitHub at all, and don&#8217;t go to Netlify. The reason for that is generally that it&#8217;s just noisy. The changes to those &#8220;built&#8221; files will occur on almost every commit, and it&#8217;s not particularly interesting to see those files change in Git. It&#8217;s interesting to see\u00a0what you, the author, changed, not the changes to the built files. So, because Netlify doesn&#8217;t have them, it can just build them for itself. <\/p>\n\n\n\n<p>We need to go into the Netlify settings for our project into <strong>Build &amp; deploy > Continuous deployment > Build settings.<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"281\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.58.13%E2%80%AFPM.png?resize=1024%2C281&#038;ssl=1\" alt=\"\" class=\"wp-image-6514\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.58.13%E2%80%AFPM.png?resize=1024%2C281&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.58.13%E2%80%AFPM.png?resize=300%2C82&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.58.13%E2%80%AFPM.png?resize=768%2C211&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.58.13%E2%80%AFPM.png?resize=1536%2C422&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-1.58.13%E2%80%AFPM.png?w=1872&amp;ssl=1 1872w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>We update our &#8220;build command&#8221; to <code>npm run build<\/code> and the &#8220;publish directory&#8221; to <code>dist<\/code>. <\/p>\n\n\n\n<p>Netlify is smart enough to do this itself when you add an Astro project from the get-go, but here we&#8217;re changing the site from totally static to Astro, so it&#8217;s our job to update it. <\/p>\n\n\n\n<p>A new deployment from Netlify (which you can do from a new commit to GitHub or <strong>Deploys > Trigger Deploy<\/strong> in the Netlify dashboard) and we&#8217;re in business:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?resize=865%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-6515\" style=\"width:611px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?resize=865%2C1024&amp;ssl=1 865w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?resize=253%2C300&amp;ssl=1 253w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?resize=768%2C909&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?resize=1298%2C1536&amp;ssl=1 1298w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?resize=1731%2C2048&amp;ssl=1 1731w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.00.39%E2%80%AFPM.png?w=1908&amp;ssl=1 1908w\" sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Adding a Real Domain Name<\/h2>\n\n\n\n<p>Right now I&#8217;ve got <code>mycoolpersonalportfolio.netlify.app<\/code> which is indeed a &#8220;real&#8221; domain name. But it&#8217;s just the free subdomain that Netlify gives you. It&#8217;s neat you can customize it, but it doesn&#8217;t have quite the professional feel that your own domain name would have. For example, my real website is at <code>chriscoyier.net<\/code> and that feels much better to me. <\/p>\n\n\n\n<p>A domain like that is something you <em>own.<\/em> You have to buy it, and you can have it forever as long as you pay the renewal costs. In a sense, the domain name is almost more important than the website that&#8217;s on it since the content can and will change but the domain name won&#8217;t. <\/p>\n\n\n\n<p>Netlify itself will help you buy a domain name. And honestly, it&#8217;s almost surely the easiest path forward here to do that, as they are incentivized to make it easy and work flawlessly. That&#8217;s fine, it&#8217;ll get the job done. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"357\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.10.50%402x.png?resize=1024%2C357&#038;ssl=1\" alt=\"\" class=\"wp-image-6516\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.10.50%402x.png?resize=1024%2C357&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.10.50%402x.png?resize=300%2C105&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.10.50%402x.png?resize=768%2C268&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.10.50%402x.png?resize=1536%2C536&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.10.50%402x.png?w=2042&amp;ssl=1 2042w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>But personally, I like to keep the domains I own registered separately from the web host. Let&#8217;s say you want to leave Netlify hosting one day, wouldn&#8217;t that be weird to manage the domain at Netlify while dealing with the hosting somewhere else? It feels weird to me, like the incentives are now off. <\/p>\n\n\n\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">I have most of my domains on\u00a0<a href=\"https:\/\/www.godaddy.com\/\" target=\"_blank\">GoDaddy,<\/a>\u00a0which is a big, popular choice, but I&#8217;ve heard good things about\u00a0<a href=\"https:\/\/porkbun.com\/\" target=\"_blank\">Porkbun<\/a>, there is\u00a0<a href=\"https:\/\/www.cloudflare.com\/products\/registrar\/\" target=\"_blank\">Cloudflare<\/a>, and a million others.<\/span> <\/p>\n\n\n\n<p>I own <code>coyier.dev<\/code> and I&#8217;ve never done anything with it, so what I&#8217;ll do is set it up as the domain for this project. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Updating DNS<\/h3>\n\n\n\n<p>The trick is updating the DNS information for the domain name I own to what Netlify wants to host the site properly. In Netlify, I go to <strong>Domain Management<\/strong> and get to this area. At the same time, I&#8217;m logged into GoDaddy and find my way to the DNS <strong>nameservers<\/strong> area. I need to update the nameservers in GoDaddy to the ones Netlify tells me to use. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.16.30%402x.png?resize=1024%2C562&#038;ssl=1\" alt=\"\" class=\"wp-image-6517\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.16.30%402x-scaled.png?resize=1024%2C562&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.16.30%402x-scaled.png?resize=300%2C165&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.16.30%402x-scaled.png?resize=768%2C422&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.16.30%402x-scaled.png?resize=1536%2C843&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/CleanShot-2025-07-11-at-14.16.30%402x-scaled.png?resize=2048%2C1125&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"learn-more\">It&#8217;s likely to take a couple of hours for you to see this actually work. DNS is strange and mysterious though, requiring routers around the world to learn this new information, so it&#8217;s possible it takes 24 hours or more. <\/p>\n\n\n\n<p>Once this process is done. The <em>DNS is resolving<\/em>, as they say, we&#8217;re done here! <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"849\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.32.15%E2%80%AFPM.png?resize=1024%2C849&#038;ssl=1\" alt=\"\" class=\"wp-image-6519\" style=\"width:606px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.32.15%E2%80%AFPM.png?resize=1024%2C849&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.32.15%E2%80%AFPM.png?resize=300%2C249&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.32.15%E2%80%AFPM.png?resize=768%2C636&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.32.15%E2%80%AFPM.png?resize=1536%2C1273&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-11-at-2.32.15%E2%80%AFPM.png?w=1914&amp;ssl=1 1914w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">We did it<\/h2>\n\n\n\n<p>We&#8217;ve done what we set out to do. We have a portfolio website for ourselves. <\/p>\n\n\n\n<p>The code for it we got on GitHub, which is a great place for it. Just think, if we drop our computer into a lake, when we get a new computer, we can just pull the code down again from GitHub and away we go. We could even invite a friend to help us with it and our changes will merge together. <\/p>\n\n\n\n<p>We&#8217;re using Astro to build the site, which does all sorts of useful things for us like making the best static website it can make. We&#8217;re taking advantage of it&#8217;s build process to manage the <strong>work<em> <\/em><\/strong>area of the site so it&#8217;ll be easy to add and change things. <\/p>\n\n\n\n<p>We have Netlify hosting the site for us, which makes the website a <em>real<\/em> website that anyone in the world can visit. Netlify even builds our website for us when we commit new code to GitHub. This keeps our GitHub repo nice and clean. <\/p>\n\n\n\n<p>We have a <em>real<\/em> domain name that we&#8217;ve &#8220;pointed&#8221; at Netlify. This gives us a nice level of professionalism and control. <\/p>\n\n\n\n<p>If you&#8217;ve used this as a guide to do this work, I&#8217;d love to hear from you. You&#8217;re well on your web to becoming a web professional. If you&#8217;re anything like me, you get a nice sense of satisfaction from this whole process. \ud83d\udc9c<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The last part of this series is taking our site that we&#8217;ve got in GitHub and addng an Astro build process to it, then mapping a domain we own to the Netlify-hosted site.<\/p>\n","protected":false},"author":1,"featured_media":6525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[144,175,269,351],"class_list":["post-6028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-astro","tag-deployment","tag-hosting","tag-portfolio"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Deploy-a-Site-with-a-Build-Process-a-Custom-Domain-Name.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=6028"}],"version-history":[{"count":17,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6028\/revisions"}],"predecessor-version":[{"id":6527,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6028\/revisions\/6527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/6525"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=6028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=6028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=6028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}