TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Building a personal website in 2021

534 pointsby mkosmulabout 4 years ago

35 comments

arp242about 4 years ago
I think the big number 1 that trumps all others when building a person website is: focus on writing content.<p>This is by far the hardest part. All the other stuff: it&#x27;s just tangential. Wordpress, Blogger, Jekyll, Hugo, Medium, hand-written HTML files: IMHO it doesn&#x27;t really matter <i>if</i> you don&#x27;t have any content. Just use whatever is easiest to get started with and gets out of your way when writing. For me, personally, it would be writing Markdown in Vim and converting that. For other people, it&#x27;s something else.<p>Later, when you actually have some content going you can start focusing on tooling, layout, and so forth. Converting things to another platform usually isn&#x27;t too hard. But chances are, you will never actually get any content going. I&#x27;ve seen a lot of people create personal websites, write one or two things on it, and then basically don&#x27;t do anything with it.<p>I&#x27;ve built some websites for various friends&#x2F;non-profits over the years, and about 90% of the time they never actually wrote any content. These days I ask people to write content first, and then I&#x27;ll build the website for them. Most of the time I never hear about it again. That&#x27;s okay, it&#x27;s really hard to write content and a lot of people (myself included, before I had more experience with this sort of thing) tend to be way too optimistic about it and underestimate just how hard this can be.<p>And people will read your website regardless if your content is good. Is Paul Graham&#x27;s website the peak of web design? Not really. People still read it. Dan Luu&#x27;s website? Pretty much the most basic HTML file you can get. Still widely read.<p>That being said, if your goal is also to <i>learn</i> more if you&#x27;re young or inexperienced: then sure, muck around with these tools all you want. I learned a lot from building my personal website over the years in all sorts of tools (geocities, hand-written HTML, shell scripts, PHP, Python, PHP again but this time with MongoDB, back to shell script, and finally settled Jekyll) and for much of this time I didn&#x27;t have a lot of content. That was okay, because I learned a lot from the process.
评论 #27176829 未加载
评论 #27177206 未加载
评论 #27175585 未加载
评论 #27176243 未加载
评论 #27175599 未加载
评论 #27175388 未加载
评论 #27180621 未加载
评论 #27180363 未加载
评论 #27183652 未加载
评论 #27191540 未加载
评论 #27179354 未加载
评论 #27180367 未加载
评论 #27182719 未加载
评论 #27179673 未加载
评论 #27176408 未加载
评论 #27175789 未加载
snowwrestlerabout 4 years ago
It’s a good example of how each person’s experience guides their sense of simplicity.<p>This person felt like Wordpress was too complicated, despite it being a system you can use to set up a site with literally no coding at all (using Wordpress.com or one of the many hosting providers with one-click installs). You can live-swap themes to see which one you like, again with just some clicking.<p>Meanwhile he is hand-editing .htaccess files to get the URL structure he wants and switching from JPG to WebP (a change with no real-world SEO value) to try to help SEO.<p>This is not to condemn or criticize! It’s just that when people have experience with having their hands directly on software development, they may be more likely to prefer a web stack that mimics that feel. “Easier” for a coder is going to be different from “easier” for an artist with no coding experience. Look how many artists use Squarespace or Wix for example, which did not even make the list for this effort apparently.
评论 #27174706 未加载
评论 #27181897 未加载
评论 #27175057 未加载
评论 #27174990 未加载
评论 #27175239 未加载
评论 #27178988 未加载
评论 #27180539 未加载
评论 #27174535 未加载
评论 #27175106 未加载
评论 #27175344 未加载
minimaxirabout 4 years ago
If you&#x27;re building a personal website from scratch in 2021 (especially a blog), I <i>strongly</i> recommend Hugo (<a href="https:&#x2F;&#x2F;gohugo.io" rel="nofollow">https:&#x2F;&#x2F;gohugo.io</a>) over Jekyll. I had used Jekyll for a decade and very often hit random quirks that have been completely eliminated with modern Hugo. However, there&#x27;s a bit of a migration process if you are moving from Jekyll to Hugo despite both being Markdown-based blogs.<p>If you want a more advanced framework for a personal website, I recommend Wowchemy (<a href="https:&#x2F;&#x2F;wowchemy.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;wowchemy.com&#x2F;</a>) on top of Hugo, which gives the tools needed out-of-the-box like lazy loading&#x2F;SEO&#x2F;object-oriented collections, albeit with a massive learning curve.
评论 #27175262 未加载
评论 #27175052 未加载
评论 #27180104 未加载
评论 #27181466 未加载
评论 #27177494 未加载
评论 #27175156 未加载
评论 #27177465 未加载
评论 #27175418 未加载
rayragabout 4 years ago
Two tips:<p>- don&#x27;t justify text, it doesn&#x27;t look good and it makes text harder to (<a href="https:&#x2F;&#x2F;designforhackers.com&#x2F;blog&#x2F;justify-text-html-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;designforhackers.com&#x2F;blog&#x2F;justify-text-html-css&#x2F;</a>)<p>- &#x27;On this page&#x27; section is too long. And once I scroll down I don&#x27;t see it anymore so I can&#x27;t use it for navigation. Look at <a href="https:&#x2F;&#x2F;getbootstrap.com&#x2F;docs&#x2F;5.0&#x2F;getting-started&#x2F;introduction&#x2F;" rel="nofollow">https:&#x2F;&#x2F;getbootstrap.com&#x2F;docs&#x2F;5.0&#x2F;getting-started&#x2F;introducti...</a> or <a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;installation" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;installation</a> to see how useful can it be.
评论 #27174590 未加载
评论 #27174433 未加载
评论 #27174423 未加载
评论 #27174618 未加载
评论 #27174771 未加载
评论 #27175041 未加载
austincheneyabout 4 years ago
If a personal website for a software developer should reflect current capabilities or employment trends then it should conform to this checklist:<p>* Use React. Every paragraph, yes each one, should be a JSX component. If anybody asks you about this just respond with something unrelated about test automation.<p>* A fancy logo front and center above the fold over a gradient. Catch that eye but leave the user hanging on what the site is actually about because pausing for dramatic effect is most important.<p>* Mention somewhere that accessibility is important and stand behind that statement with great pride. In the next statement forget about accessibility completely like a bad case of mania and add a bunch of unnecessary JavaScript and specifically describe how much you hate JavaScript.<p>* Something about Agile. This should compromise the bulk of all human consumable content. It doesn’t have to any make sense and can be completely out of order.<p>* Actually push all content to the end and just worry about which tools to use then use Twitter feeds for all content.<p>Sarcasm aside actual content comprised of words makes for a good litmus test to discriminate interested users from people who find such things a chore. It’s the difference between employment recruiters and internal developers filtering those potential candidates.
评论 #27177091 未加载
评论 #27178636 未加载
kevincoxabout 4 years ago
&gt; I also spent a little time on redirecting the addresses of [...] my old website to [...] the new one. Failing to do this would have cost me a lot in search engine rankings since all the incoming links collected over the years would be gone [...]<p>I was disappointing that the main reason that they valued keeping past links alive was SEO. To me the innate benefit of not breaking links and bookmarks on your readers (or future readers) should be enough.
评论 #27174376 未加载
bmitcabout 4 years ago
I&#x27;ve been having decision paralysis about setting up my own personal website. I would personally like to avoid some bloated frameworks or tools like Wordpress, Squarespace, Wix, etc. I&#x27;m also not really sure I even want a blog. I&#x27;d like to have a collection of articles that aren&#x27;t just written once and then moved on from but rather are updated and refined over time. I&#x27;ve looked at static website generators, but don&#x27;t really feel they&#x27;re that simple.<p>So I&#x27;ve been looking to just do things from scratch. Maybe it would be nice to write articles in markdown and have a custom static website generator that takes these and publishes them. It could be a fun F# or Racket project. The idea of simple HTML and CSS being loaded for maximum speed and old school web with a little something for interactive graphs and other things is something that sits well for me.<p>Although, I just took on a new Elixir job, and something with Liveview and Livebook for interactivity could be really cool.<p>Anyone else struggle with this and end up coming up with a solution or finding one?
评论 #27177284 未加载
评论 #27175267 未加载
评论 #27175034 未加载
评论 #27176875 未加载
评论 #27174995 未加载
评论 #27175144 未加载
评论 #27175012 未加载
majewskyabout 4 years ago
I love how the first comment at the end of the page asks which CDN and which load balancer the site is using, as if he&#x27;s filling entire racks with this simple static website. Absolutely hilarious.
评论 #27177554 未加载
forgotmypw17about 4 years ago
I agree with most of these sentiments. I&#x27;ve often wished I started doing something like this 20 years ago, and have a website which has been around for that long. So I decided to do the next best thing: Make a website which COULD HAVE been around for 20+ years, and make it compatible with the 20+ years worth of browsers since 1995, around when I started using the Web and HTTP&#x2F;1.1 became common (the latter allowing support of cheap shared web hosting using the Host: header)
评论 #27185292 未加载
BayesianDiceabout 4 years ago
I agree with comments saying that a key point is producing content. I&#x27;d spent a couple of years of considering starting a blog (with no commercial&#x2F;monetisation, but somewhere to post thoughts on technology &#x2F; games &#x2F; books I find interesting) and trying out various platforms&#x2F;solutions and producing very little. Then I finally got started with a simple Hugo&#x2F;Github&#x2F;Netlify setup, with the plan of adding more technology bells and whistles if readership or my inspiration to continue producing content justifies it.<p>A question on which I&#x27;d be interested in views: how important or otherwise do people consider the ability to sign up for a mailing list &#x2F; newsletter to be informed of new content? I dislike the in-your-face modal pop-ups etc. - but am wondering if readers, if they like existing articles on a site, would appreciate a low-key, unobtrusive option of signing up for an email notification.
评论 #27177562 未加载
评论 #27178088 未加载
avilayabout 4 years ago
Surprised not to see ghost in here. They have a paid managed version at <a href="https:&#x2F;&#x2F;ghost.org" rel="nofollow">https:&#x2F;&#x2F;ghost.org</a> and it is fairly easy to set up with any of the public cloud providers. I have set mine up with Digital Ocean (<a href="https:&#x2F;&#x2F;ghost.org&#x2F;docs&#x2F;install&#x2F;digitalocean&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ghost.org&#x2F;docs&#x2F;install&#x2F;digitalocean&#x2F;</a>).
Natalesabout 4 years ago
I started writing blog-like text entries in my .plan file in the mid 80s, so others could use finger in UNIX and read what I was thinking.<p>I later learnt HTML just so I could keep writing my thoughts. I lost content, I got spam, I had to learn to defend myself when the Internet became aggressive. It wasn&#x27;t like that early on. We believed it was for the betterment of humankind. I know, how naive.<p>I went through the &quot;Wordpress phase&quot;, the static phase (Pelican, then Hugo) but I ultimately decided to define what I wanted to share, and I realized few people really cared about long writings, but rather, the nitty gritty. So I chose to use the Zettlekasten model where I focus on specifics, narrow, single-topic. I chose TiddlyWiki (the Drift distribution specifically), and I have two files, one public, one private. As simple as that. My default is public. If I have a thought, learning, recipe, experience, anything that could be useful to anyone else, I put it on the public file. Otherwise, it goes in the private. As simple as that.<p>And thanks to CloudFlare&#x27;s JS compression, the whole thing works great for me. <a href="https:&#x2F;&#x2F;ramirosalas.com" rel="nofollow">https:&#x2F;&#x2F;ramirosalas.com</a>
strenholmeabout 4 years ago
I have a personal website, once that has been online since 1997. The reason I have it is because I have written a lot of content over the years, and because having it on my own static HTML page website is because why should I write a bunch of content for free to benefit a social media website or commercial blog service? More sense to have it on my own website.<p>Shameless plug: <a href="https:&#x2F;&#x2F;samiam.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;samiam.org&#x2F;</a>
papitoabout 4 years ago
I spent some up front time setting up Supervisor, Jekyll, and a light server listening to Github actions that, upon an update, just pulls the latest on commit and reruns the static publisher. I even have a staging branch&#x2F;subdomain.<p>The first point - easy to update - is critical. If there is any friction to the process, you will just never do it. Your personal time is inherently much more valuable than your work time.<p>And if you are creating your new personal site, I highly recommend scrapping everything you know and doing it with Grid and Flex.
评论 #27175006 未加载
ChrisMarshallNYabout 4 years ago
I think that what you do is really cool: <a href="https:&#x2F;&#x2F;origami.kosmulski.org&#x2F;about" rel="nofollow">https:&#x2F;&#x2F;origami.kosmulski.org&#x2F;about</a><p>I&#x27;m a big fan of &quot;do what you love.&quot;
评论 #27175212 未加载
toto444about 4 years ago
Has anyone noted the use of Github for commenting at the bottom ? That is quite a nice way to have social features without being too &#x27;social&#x27;.
rectangabout 4 years ago
&gt; <i>Longevity: since I would be putting in a lot of work, I wanted to be able to expand and maintain the site for at least 5-10 years without major overhaul (but, technology being what it is, I was aware I would probably have to perform some maintenance work on<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=27173728ce" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=27173728ce</a> every 3 years or so).</i><p>With that criteria, I wonder about the choice of Jekyll, which is huge and complicated. I&#x27;d be looking for something with fewer moving parts.<p>I suppose one nice thing is by that limiting yourself to static html output it becomes easier to switch from one generator to another.
评论 #27175810 未加载
评论 #27174696 未加载
评论 #27174505 未加载
评论 #27174466 未加载
bothra90about 4 years ago
I really wish more design docs &#x2F; project reports looked like this article - talking about the whys, goals &#x2F; non-goals, options considered, prototypes built, challenges, and solutions, learnings and next steps. Kudos!
m01about 4 years ago
I was glad to see the author start with the context &amp; requirements, rather than with the tech stack.
primaryobjectsabout 4 years ago
I also went with a static site generator during my own blog upgrade and chose Hexo.<p>My tech stack is: Hexo Markdown Node.js Heroku<p>Here is my whole story!<p><a href="http:&#x2F;&#x2F;www.primaryobjects.com&#x2F;2015&#x2F;12&#x2F;15&#x2F;a-tale-of-migrating-to-a-static-web-site&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.primaryobjects.com&#x2F;2015&#x2F;12&#x2F;15&#x2F;a-tale-of-migrating...</a>
评论 #27174799 未加载
______-about 4 years ago
I don&#x27;t have a personal website, but I operate various online services like pastebins, image uploader sites, and other online tools that many people use. People would get more utility out of those than a personal blog, since I learned (a bit late) that I&#x27;m not especially good at writing and communicating my ideas very well.<p>I can get across an idea, but it usually misses nuance and I find writing personal stuff very embarrassing later on down the road, when I start regretting ever hitting <i>publish</i>. Out of all the personal blogposts I have written, roughly three I am proud of, the rest just embarrass me.
bobbydreamerabout 4 years ago
Content is king actually that keeps the site going. Even if you have a personal site and only users are 10 bots and 20 random users.<p>First website I had made is in 2007 it was full flash site. It was pretty much decent and hosted it on bravehost. After hosting it, I was done, didn&#x27;t do anything much. Ten years later 2017 I upgraded my site it was full handmade with css and it had lots of things planned but again after 5 posts didn&#x27;t touch much.<p>After that still my thought was making the site more attractive and I had ideas for posts&#x2F;articles. I was collecting stuffs<p><a href="https:&#x2F;&#x2F;bobbydreamer.com&#x2F;things-that-my-new-site-should-have" rel="nofollow">https:&#x2F;&#x2F;bobbydreamer.com&#x2F;things-that-my-new-site-should-have</a><p>One epiphany, what&#x27;s the point of making the things attractive, if I dont continually add something. So I stopped everything I was doing<p><a href="https:&#x2F;&#x2F;bobbydreamer.com&#x2F;epiphany-moment" rel="nofollow">https:&#x2F;&#x2F;bobbydreamer.com&#x2F;epiphany-moment</a><p>Looked into SSGs, picked Gatsby for speed they had some starter templates, picked the one from LekoArts started using it.<p>I had read fantastic blog posts from certain people from HackerNews but they had only one or two posts with the depth they had in their posts, I wish they had written more.<p>Looking at all of that consistency is the key. Here I have noted down the steps on how I did it and I follow it to add posts mostly once a month.<p><a href="https:&#x2F;&#x2F;bobbydreamer.com&#x2F;how-i-made-this-site" rel="nofollow">https:&#x2F;&#x2F;bobbydreamer.com&#x2F;how-i-made-this-site</a><p>What I use to make this site 1. Content in markdown(MDX) 2. Using firebase for hosting 3. GitHub as version control.
codeboltabout 4 years ago
The main argument for static site for me was the simplicity and price of hosting. It&#x27;s also CDN friendly which means a huge performance boost.<p>Hosting a static site on Azure costs me 2-3$&#x2F;mo which is well within the free credits I get from my work-sponsored MSDN subscription.
Lammyabout 4 years ago
&gt; Another matter, one of personal taste and experience, is that as a developer, I am used to working with text files, and editing a bunch of files in an IDE felt like a convenient option compared to having to edit each page in a web interface in the browser.<p>I&#x27;m a big fan of &quot;Jekyll Admin&quot; as a way to get the best of both worlds:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;jekyll&#x2F;jekyll-admin&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jekyll&#x2F;jekyll-admin&#x2F;</a><p><a href="https:&#x2F;&#x2F;jekyll.github.io&#x2F;jekyll-admin&#x2F;self-hosting" rel="nofollow">https:&#x2F;&#x2F;jekyll.github.io&#x2F;jekyll-admin&#x2F;self-hosting</a>
__turbobrew__about 4 years ago
It took me about an hour to set up an AWS static website backed by S3 and cached by cloudfront. I use Jekyll and simply sync the _site folder to s3 to update my website.<p>Some nice things about this setup:<p>1.) AWS static sites don’t insert trackers 2.) There is zero maintenance 3.) Cloudfront + static website is very fast 4.) Setup can scale near infinitely (so can your bill)<p>Downsides:<p>1.) You are locked into AWS. Although migrating to another provider to serve static files would be trivial. 2.) If your website took off in popularity the bill might be more than you are comfortable with.
评论 #27182419 未加载
ignoramousabout 4 years ago
In 2021? I&#x27;d prefer serverless and low-code. If I only need a blog (and not a website) I&#x27;d consider posting on substack.com, dev.to, or hashnode.com instead.<p>&gt; <i>Easy to update: I usually post 1-2 pictures to social media each week, and I wanted adding a picture to my site to be as easy as posting it on any other platform... I could buy a domain and redirect it to my flickr, facebook, or instagram feed</i><p>There exists no-code apps that post your social media feeds to a weblog. One of the better ones I know is milkshake.app <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=20154181" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=20154181</a><p>&gt; <i>The best approach would be to have data separated from presentation as much as possible, i.e. for each model to just define a few fields such as: name, model type, image, etc., and use some kind of templates to present this data to the end user.</i><p>Low-code builders like onuniverse.com, glideapps.com, draftbit.com (mobile apps), and pory.io come to mind, though none of them let you publish websites via another provider.<p>&gt; <i>Longevity: since I would be putting in a lot of work, I wanted to be able to expand and maintain the site for at least 5-10 years without major overhaul.</i><p>Sound like serverless services like netlify.com, pages.github.com, vercel.com, pages.dev fit the bill to deploy the site to?
评论 #27175255 未加载
评论 #27177234 未加载
评论 #27174616 未加载
darekkayabout 4 years ago
I&#x27;ve migrated [1] my blog to Eleventy this year and it is a pleasure to work with. I especially like the data model and the flexibility.<p>[1] <a href="https:&#x2F;&#x2F;darekkay.com&#x2F;blog&#x2F;hexo-to-eleventy&#x2F;" rel="nofollow">https:&#x2F;&#x2F;darekkay.com&#x2F;blog&#x2F;hexo-to-eleventy&#x2F;</a>
swayvilabout 4 years ago
For my site this is index.php<p><pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;..&#x2F;style.css&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt; &lt;&#x2F;head&gt; &lt;body&gt; &lt;div class=&quot;main&quot;&gt; &lt;?php include &quot;..&#x2F;Parsedown.php&quot;; $pd=new Parsedown(); $mc=file_get_contents(&quot;..&#x2F;contentHeader.md&quot;); echo $pd-&gt;text($mc); $mc=file_get_contents(&quot;contentMain.md&quot;); echo $pd-&gt;text($mc); $mc=file_get_contents(&quot;..&#x2F;contentFooter.md&quot;); echo $pd-&gt;text($mc); ?&gt; &lt;&#x2F;div&gt; &lt;&#x2F;body&gt; &lt;&#x2F;html&gt; </code></pre> The rest is Parsedown.php, markdown content and some images. Arranged in a directory tree. An index and a contentMain.md in every directory.<p>After trying several &quot;simple&quot; Content Management Systems, this is where I arrived. I wish I did it 10 years ago.
cutupsabout 4 years ago
Sometimes I wish I had a website that was just a collection of everything I&#x27;ve shared or written on other platforms, just fully under my control and backed up for later. Is there anything that can spider content based on providing integration creds with various platforms?
towardsclarityabout 4 years ago
Downside of building a website in 2021: tons of options to choose from, lots of potential technical complexity.<p>Upside: there are many &quot;one click&quot; options (Substack, Webflow, etc) that make it dead simple.
roachpepeabout 4 years ago
Thanks for the article, it&#x27;s a very readable journal, sharing experiences and writing up also the reasoning behind decisions contributes to future builders.<p>Maybe someone already said it but I&#x27;ll echo anyway - unless it&#x27;s all about going outside the comfort zone to learn new tools, the person building should always first picture what needs to be built, then pick the right materials and tools for the project. Taking their own skills into account when using said tools of course.<p>Preferably even think a little ahead about your content to come if the site is meant to last for years when picking the tech. Ask yourself some &quot;whatifs&quot;. Like what if you want to later on make some trade for yourself and set up shop for your crafts or skillset, can it be done easily enough as well?<p>TL;DR - Useful and well written article, there&#x27;s never enough easy-read, non-commercial, experience-based journals about site building basics to help newcomers. Cheers!
hnal943about 4 years ago
have you checked out 11ty? It&#x27;s similar to Jekyll but doesn&#x27;t have dependencies on Ruby.
评论 #27174699 未加载
评论 #27174447 未加载
评论 #27180158 未加载
lernerzhangabout 4 years ago
Why not just Medium or Quora?
评论 #27180301 未加载
32gbsdabout 4 years ago
That is a long article only to end up with a website that looks like every other website. Could as well be wordpress or a facebook page.
lukaeschabout 4 years ago
Instead of building a website from scratch, you could use SoTrusty and create an order page with videos or photos of your products. 100% Google Lighthouse SEO, &gt;90% Performance (depending on content) out of the box.<p>Here an example of a store in Germany: <a href="https:&#x2F;&#x2F;menu.sotrusty.com&#x2F;item-una-feinschneiderei" rel="nofollow">https:&#x2F;&#x2F;menu.sotrusty.com&#x2F;item-una-feinschneiderei</a><p>What do you think about it? I appreciate any feedback. Thanks :)