Deploy an Eleventy site to my own server?
February 21, 2021 4:07 PM Subscribe
I'm not super adept at coding or the technical side of web development, but I've created a static personal website using Eleventy. I can deploy it with Netifly to something like something.netlify.app, and can create an alias that redirects to that URL, but I'd much rather just host it myself. All of the tutorials I can find, though, seem to assume you are deploying it to Netlify. Help?
I used Eleventy (specifically, eleventy garden) to create a static website to host my blog and my reading notes on things. They're all in markdown, so I used eleventy to create a site that I'm reasonably happy with. I have the site in a GitHub repo that I use to deploy it using Netlify.
That's working well, but I want to be able to host the site myself on my own domain and hosting (which I already have). I can't for the life of me figure out how to do this, though. I'd like it to be pretty simple so that when I write something in markdown it's not a huge effort to get it on the web. The github to netlify system works well enough for this, I admit, but I'd really like to use my own domain and hosting.
I'm not all that technically adept but I figure that there must be some way to do this, right? Is it just something so simple that nobody's even bothering to write about how to do it?
I used Eleventy (specifically, eleventy garden) to create a static website to host my blog and my reading notes on things. They're all in markdown, so I used eleventy to create a site that I'm reasonably happy with. I have the site in a GitHub repo that I use to deploy it using Netlify.
That's working well, but I want to be able to host the site myself on my own domain and hosting (which I already have). I can't for the life of me figure out how to do this, though. I'd like it to be pretty simple so that when I write something in markdown it's not a huge effort to get it on the web. The github to netlify system works well enough for this, I admit, but I'd really like to use my own domain and hosting.
I'm not all that technically adept but I figure that there must be some way to do this, right? Is it just something so simple that nobody's even bothering to write about how to do it?
Eleventy outputs your files to a static folder, by default, it’s “_site”. You can just take the contents of that folder and upload it to wherever your server is.
You can do this manually, and it will work just fine. I like to use git-ftp though. It could be considered hard to configure, but once you’ve got it working, it’s super easy to push up the newest version of your site to GitHub, and then run git-ftp, and it will compare the old version on your server to the GitHub repo, and then it only uploads the changed files. Only marginally more complicated than netlify.
posted by kpmcguire at 5:03 PM on February 21, 2021
You can do this manually, and it will work just fine. I like to use git-ftp though. It could be considered hard to configure, but once you’ve got it working, it’s super easy to push up the newest version of your site to GitHub, and then run git-ftp, and it will compare the old version on your server to the GitHub repo, and then it only uploads the changed files. Only marginally more complicated than netlify.
posted by kpmcguire at 5:03 PM on February 21, 2021
FWIW, in order to feel like I had some exposure to AWS I stuck my toe into S3 by just taking some of my Markdown docs, converting them to HTML (via Visual Code), then uploading the result to the US East N.Virginia servers. I could navigate around but of course it was totally static. I only mention this because it was a different path to a similar result (though I realize you are also trying to stand up a blog).
posted by forthright at 5:14 PM on February 21, 2021
posted by forthright at 5:14 PM on February 21, 2021
Response by poster: Thanks everyone. I don't think I ever saw anywhere that I could just use the _site folder... Oops. Is there any way to automated it, though? I like that when I commit my changes to GitHub, the Netlify site automatically captures that the change has occurred and updates the site.
@kpmcguire is that with git-ftp does?
posted by synecdoche at 5:44 PM on February 21, 2021
@kpmcguire is that with git-ftp does?
posted by synecdoche at 5:44 PM on February 21, 2021
Git-ftp doesn’t do it automatically, you have to run a command on the command line to do it. But usually I’m already on the command line pushing stuff up to GitHub, so it’s easy to just type one more thing and be done with it. But YMMV.
I find it easier than firing up an SFTP client. Once it runs, it does automatically determine which files are the changed files. Which is a nice thing to not have to determine/remember by myself.
posted by kpmcguire at 6:40 PM on February 21, 2021
I find it easier than firing up an SFTP client. Once it runs, it does automatically determine which files are the changed files. Which is a nice thing to not have to determine/remember by myself.
posted by kpmcguire at 6:40 PM on February 21, 2021
> Is there any way to automate it
there's a few different options for setting up deployment:
1. use the same computer you use for authoring the site and committing changes to deploy to your hosting ; or
2. get the machine that hosts your web site to automatically pull down and deploy new versions from your git repo ; or
3. set up some third machine to detect whenever a new version is pushed to the main branch of your git repo and then automatically deploy it to your host
I'd argue the simplest option to set up is the first one, deploying to your host using the computer (e.g. a macbook) you use to edit the site and commit changes. Option 1 is arguably also lower risk than 2 or 3, since if you don't set up 2 or 3 properly it can create security risks.
One way to do option 1 is what kpmcguire suggests, setting up git-ftp. Once you've configured git-ftp you would just need to execute a`git ftp push` command from your shell to deploy the lastest changes to your host after doing `git commit`.
Personally, I am sceptical of suggesting ftp since it isn't secure by default. Assuming I was deploying to some host that I could connect to securely using ssh, I would set up ssh access once and then use `rsync` to deploy any changed files from my development machine to the host.
After setting up ssh access and confirming i could successfully login to the host using ssh, the workflow would be something like:
(i) (on your computer) edit the content files for your blog in the manner of your people
(ii) commit the changes you want to commit using git
(iii) (on your computer) run the eleventy command line tool to regenerate the static site to _site
(iv) rsync -avz --delete _site/ username@your.server.example.com:/some/path/to/your/static/site/data/dir
For more details see e.g. the guide of how to deploy a hugo generated static site using rsync. In that guide every time it indicates to run a command involving `hugo`, replace it with `eleventy`. When it says to do a command involving a local `public/` directory, replace it with `_site/`.
Re:
> 3. set up some third machine to detect whenever a new version is pushed to the main branch of your git repo and then automatically deploy it to your host
This can result in an even nicer workflow but is less simple to set up and involves learning some more things, than if you just run commands / a script locally on your computer.
One way to do this would be to setting up a "continuous deployment" workflow using github.com's github actions product. You define a file that declares a bunch of steps to run that will be triggered whenever 1 or more new commits are published to your repo's main branch in your github.com hosted git repo. The steps would be things like "build my static site using eleventy" then "copy my static files onto my web host using ftp or rsync or something". One potential risk if this is not set up properly is the machine executing the github actions deployment script needs to be able to authenticate to publish your site to your web host -- so you need to tell it login credentials somehow. If you don't do this carefully you might accidentally commit your web hosting access credentials to your public github.com repo where 7 billion people can read them and use them to fill your web host with malware. You'd need to figure out how to use github actions to manage your secrets properly.
posted by are-coral-made at 8:33 PM on February 21, 2021
there's a few different options for setting up deployment:
1. use the same computer you use for authoring the site and committing changes to deploy to your hosting ; or
2. get the machine that hosts your web site to automatically pull down and deploy new versions from your git repo ; or
3. set up some third machine to detect whenever a new version is pushed to the main branch of your git repo and then automatically deploy it to your host
I'd argue the simplest option to set up is the first one, deploying to your host using the computer (e.g. a macbook) you use to edit the site and commit changes. Option 1 is arguably also lower risk than 2 or 3, since if you don't set up 2 or 3 properly it can create security risks.
One way to do option 1 is what kpmcguire suggests, setting up git-ftp. Once you've configured git-ftp you would just need to execute a`git ftp push` command from your shell to deploy the lastest changes to your host after doing `git commit`.
Personally, I am sceptical of suggesting ftp since it isn't secure by default. Assuming I was deploying to some host that I could connect to securely using ssh, I would set up ssh access once and then use `rsync` to deploy any changed files from my development machine to the host.
After setting up ssh access and confirming i could successfully login to the host using ssh, the workflow would be something like:
(i) (on your computer) edit the content files for your blog in the manner of your people
(ii) commit the changes you want to commit using git
(iii) (on your computer) run the eleventy command line tool to regenerate the static site to _site
(iv) rsync -avz --delete _site/ username@your.server.example.com:/some/path/to/your/static/site/data/dir
For more details see e.g. the guide of how to deploy a hugo generated static site using rsync. In that guide every time it indicates to run a command involving `hugo`, replace it with `eleventy`. When it says to do a command involving a local `public/` directory, replace it with `_site/`.
Re:
> 3. set up some third machine to detect whenever a new version is pushed to the main branch of your git repo and then automatically deploy it to your host
This can result in an even nicer workflow but is less simple to set up and involves learning some more things, than if you just run commands / a script locally on your computer.
One way to do this would be to setting up a "continuous deployment" workflow using github.com's github actions product. You define a file that declares a bunch of steps to run that will be triggered whenever 1 or more new commits are published to your repo's main branch in your github.com hosted git repo. The steps would be things like "build my static site using eleventy" then "copy my static files onto my web host using ftp or rsync or something". One potential risk if this is not set up properly is the machine executing the github actions deployment script needs to be able to authenticate to publish your site to your web host -- so you need to tell it login credentials somehow. If you don't do this carefully you might accidentally commit your web hosting access credentials to your public github.com repo where 7 billion people can read them and use them to fill your web host with malware. You'd need to figure out how to use github actions to manage your secrets properly.
posted by are-coral-made at 8:33 PM on February 21, 2021
You could try something like this to have GitHub Actions build your site automatically whenever your commit and serve the site with GitHub Pages, and then use GitHub Pages as your host (assuming your use is broadly noncommercial and that GitHub's free hosting is suitable for your needs). You can then point your domain to GitHub Pages.
That avoids the need to have your deployment system securely manage credentials for your web host, since everything happens inside of GitHub. It's essentially are-coral-made's option #3, but without a separate host.
posted by zachlipton at 1:13 AM on February 22, 2021
That avoids the need to have your deployment system securely manage credentials for your web host, since everything happens inside of GitHub. It's essentially are-coral-made's option #3, but without a separate host.
posted by zachlipton at 1:13 AM on February 22, 2021
This thread is closed to new comments.
Netlify is doing basically the same thing but with an AWS lambda function and S3.
posted by rockindata at 4:58 PM on February 21, 2021