[{"data":1,"prerenderedAt":9105},["ShallowReactive",2],{"footer-articles":3,"/blog/run-multiple-node-js-apps-on-one-server-with-pm2":5958,"related-/blog/run-multiple-node-js-apps-on-one-server-with-pm2":6668},[4,1035,2382,2709],{"id":5,"title":6,"body":7,"category":1025,"date":1026,"description":1027,"draft":1028,"extension":64,"image":1029,"meta":1030,"navigation":163,"path":1031,"seo":1032,"stem":1033,"tighten":1028,"__hash__":1034},"blog/blog/advanced-agentic-workflows-with-stacked-skills.md","Advanced Agentic Workflows With Stacked Skills",{"type":8,"value":9,"toc":1016},"minimark",[10,14,20,23,26,31,34,37,42,55,58,86,93,99,103,106,109,119,122,141,144,147,197,200,242,245,248,252,260,267,385,388,391,398,789,793,796,906,915,918,922,925,930,933,940,944,947,996,999,1003,1006,1009,1012],[11,12,13],"p",{},"We all know that simply asking a clanker:",[15,16,17],"blockquote",{},[11,18,19],{},"Build a million-dollar app. Make no mistakes.",[11,21,22],{},"...won't work as magically as you'd expect, no matter what the vibe coders on Twitter say. However, there are far more effective ways to automate workflows for our agents.",[11,24,25],{},"Imagine having a list of 12 to-do cards in Trello and simply saying:",[15,27,28],{},[11,29,30],{},"Tackle all my pending tasks.",[11,32,33],{},"...then letting the agent run until you have 12 PRs ready for review. Pretty cool, right?",[11,35,36],{},"Today, we'll explore how to create skills, compose them together, and build exactly that kind of workflow.",[38,39,41],"h2",{"id":40},"skills-can-call-other-skills","Skills Can Call Other Skills",[11,43,44,45,50,51],{},"In ",[46,47,49],"a",{"href":48},"/blog/skills-i-know-kung-fu","the last post"," I built a skill to ",[52,53,54],"strong",{},"automate creating PRs in GitHub.",[11,56,57],{},"What's great is that not only I can run it in my agent session, but also call it from other skills. A skill can call another skill by naming its slash command as a step in its own instructions, the same way you would type it into the prompt.",[59,60,66],"pre",{"className":61,"code":62,"filename":63,"language":64,"meta":65,"style":65},"language-md shiki shiki-themes monokai","- Once you are done, create a PR using `/github-pr main`\n","SKILL.md","md","",[67,68,69],"code",{"__ignoreMap":65},[70,71,74,78,82],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sHkqI","-",[70,79,81],{"class":80},"sCdxs"," Once you are done, create a PR using ",[70,83,85],{"class":84},"szGx7","`/github-pr main`\n",[11,87,88,89,92],{},"When reading that line, the agent will run that ",[67,90,91],{},"/github-pr"," skill. There is no API or plugin system to set up, the agent is smart enough to figure it out.",[11,94,95,96,98],{},"That may sound like a small detail, but it changes how you design skills: instead of one large ",[67,97,63],{}," that tries to handle an entire process, you can write skills that each do one thing well and let them delegate the rest.",[38,100,102],{"id":101},"the-goal","The Goal",[11,104,105],{},"Let's explore a complex workflow to put this in practice.",[11,107,108],{},"I'd love to leave my agent running in the background, tackling all the pending items of a given project.",[11,110,111,112,118],{},"How can we organize the tasks? Well, perhaps we can use ",[46,113,117],{"href":114,"rel":115},"https://trello.com",[116],"nofollow","Trello",". A simple board will do: \"To Do\", \"Doing\", \"Under Review\" and \"Done\".",[11,120,121],{},"The full agentic workflow will be:",[123,124,125,129,132,135,138],"ul",{},[126,127,128],"li",{},"Pick the first card from the \"To Do\" list",[126,130,131],{},"Move the card to \"Doing\"",[126,133,134],{},"Complete the task",[126,136,137],{},"Create a PR",[126,139,140],{},"Move the card to \"Under Review\"",[11,142,143],{},"We'll keep things simple: each card will represent a feature, a concrete and rather small amount of work. Each card will have its own, dedicated PR.",[11,145,146],{},"If we are building an online shop, a card could be:",[59,148,150],{"className":61,"code":149,"language":64,"meta":65,"style":65},"# Implement Product Search\n\n- Add a search input to the product listing page\n- As the user types, filter the list of products by name\n- If no products match the search, display a \"No products found\" message\n- Clearing the search input should restore the full product list\n",[67,151,152,158,165,173,181,189],{"__ignoreMap":65},[70,153,154],{"class":72,"line":73},[70,155,157],{"class":156},"ssRA_","# Implement Product Search\n",[70,159,161],{"class":72,"line":160},2,[70,162,164],{"emptyLinePlaceholder":163},true,"\n",[70,166,168,170],{"class":72,"line":167},3,[70,169,77],{"class":76},[70,171,172],{"class":80}," Add a search input to the product listing page\n",[70,174,176,178],{"class":72,"line":175},4,[70,177,77],{"class":76},[70,179,180],{"class":80}," As the user types, filter the list of products by name\n",[70,182,184,186],{"class":72,"line":183},5,[70,185,77],{"class":76},[70,187,188],{"class":80}," If no products match the search, display a \"No products found\" message\n",[70,190,192,194],{"class":72,"line":191},6,[70,193,77],{"class":76},[70,195,196],{"class":80}," Clearing the search input should restore the full product list\n",[11,198,199],{},"Looks like a good unit of work, right? Another card could be:",[59,201,203],{"className":61,"code":202,"language":64,"meta":65,"style":65},"# Implement Product Categories\n\n- Display the list of available categories on the product listing page\n- Selecting a category should filter the displayed products\n- The user can clear the selected category to view all products again\n- The selected category should remain active while navigating the product list\n",[67,204,205,210,214,221,228,235],{"__ignoreMap":65},[70,206,207],{"class":72,"line":73},[70,208,209],{"class":156},"# Implement Product Categories\n",[70,211,212],{"class":72,"line":160},[70,213,164],{"emptyLinePlaceholder":163},[70,215,216,218],{"class":72,"line":167},[70,217,77],{"class":76},[70,219,220],{"class":80}," Display the list of available categories on the product listing page\n",[70,222,223,225],{"class":72,"line":175},[70,224,77],{"class":76},[70,226,227],{"class":80}," Selecting a category should filter the displayed products\n",[70,229,230,232],{"class":72,"line":183},[70,231,77],{"class":76},[70,233,234],{"class":80}," The user can clear the selected category to view all products again\n",[70,236,237,239],{"class":72,"line":191},[70,238,77],{"class":76},[70,240,241],{"class":80}," The selected category should remain active while navigating the product list\n",[11,243,244],{},"And so on and so forth!",[11,246,247],{},"We already have a skill that takes care of interacting with GitHub. Now, we only need one to interact with Trello.",[38,249,251],{"id":250},"the-trello-skill","The Trello Skill",[11,253,254,255,259],{},"Let's create this simple skill to teach the agent how to work with Trello's API. Of course, the reasoning model can ",[256,257,258],"em",{},"figure it out,"," but it's faster (and less token consuming) to steer it in the right direction.",[11,261,262,263,266],{},"First, we need a file with the credentials and the IDs of the board and lists we want to work with. In the root of our project, we can save a ",[67,264,265],{},"trello.json"," that would look something like this:",[59,268,272],{"className":269,"code":270,"filename":265,"language":271,"meta":65,"style":65},"language-json shiki shiki-themes monokai","{\n  \"apiKey\": \"...\",\n  \"apiToken\": \"...\",\n  \"board\": \"\u003Cboard-id>\",\n  \"lists\": {\n    \"To Do\": \"\u003Clist-id>\",\n    \"Doing\": \"\u003Clist-id>\",\n    \"Under Review\": \"\u003Clist-id>\",\n    \"Done\": \"\u003Clist-id>\"\n  }\n}\n","json",[67,273,274,279,295,306,318,326,338,350,362,373,379],{"__ignoreMap":65},[70,275,276],{"class":72,"line":73},[70,277,278],{"class":80},"{\n",[70,280,281,285,288,292],{"class":72,"line":160},[70,282,284],{"class":283},"sOx1s","  \"apiKey\"",[70,286,287],{"class":80},": ",[70,289,291],{"class":290},"susgL","\"...\"",[70,293,294],{"class":80},",\n",[70,296,297,300,302,304],{"class":72,"line":167},[70,298,299],{"class":283},"  \"apiToken\"",[70,301,287],{"class":80},[70,303,291],{"class":290},[70,305,294],{"class":80},[70,307,308,311,313,316],{"class":72,"line":175},[70,309,310],{"class":283},"  \"board\"",[70,312,287],{"class":80},[70,314,315],{"class":290},"\"\u003Cboard-id>\"",[70,317,294],{"class":80},[70,319,320,323],{"class":72,"line":183},[70,321,322],{"class":283},"  \"lists\"",[70,324,325],{"class":80},": {\n",[70,327,328,331,333,336],{"class":72,"line":191},[70,329,330],{"class":283},"    \"To Do\"",[70,332,287],{"class":80},[70,334,335],{"class":290},"\"\u003Clist-id>\"",[70,337,294],{"class":80},[70,339,341,344,346,348],{"class":72,"line":340},7,[70,342,343],{"class":283},"    \"Doing\"",[70,345,287],{"class":80},[70,347,335],{"class":290},[70,349,294],{"class":80},[70,351,353,356,358,360],{"class":72,"line":352},8,[70,354,355],{"class":283},"    \"Under Review\"",[70,357,287],{"class":80},[70,359,335],{"class":290},[70,361,294],{"class":80},[70,363,365,368,370],{"class":72,"line":364},9,[70,366,367],{"class":283},"    \"Done\"",[70,369,287],{"class":80},[70,371,372],{"class":290},"\"\u003Clist-id>\"\n",[70,374,376],{"class":72,"line":375},10,[70,377,378],{"class":80},"  }\n",[70,380,382],{"class":72,"line":381},11,[70,383,384],{"class":80},"}\n",[11,386,387],{},"Of course, remember to add that file to gitignore so you don't leak your credentials.",[11,389,390],{},"Now, we only need to tell our agent how to operate with Trello so it knows exactly what to do when we ask it to \"create a new card\" or \"move this card to Done\".",[11,392,393,394,397],{},"This is how the ",[67,395,396],{},"/trello"," skill could look like:",[59,399,402],{"className":61,"code":400,"filename":401,"language":64,"meta":65,"style":65},"---\nname: trello\ndescription: Interacts with a Trello board. Triggered by \"/trello\".\n---\n\nUse this skill whenever the user asks you to read, create, update, delete, or move cards.\n\n## Credentials\n\nRead board credentials from `trello.json` in the project root:\n\n```json\n{\n  \"apiKey\": \"...\",\n  \"apiToken\": \"...\",\n  \"board\": \"\u003Cboard-id>\",\n  \"lists\": {\n    \"To Do\": \"\u003Clist-id>\",\n    \"Doing\": \"\u003Clist-id>\",\n    \"Under Review\": \"\u003Clist-id>\",\n    \"Done\": \"\u003Clist-id>\"\n  }\n}\n```\n\n## Read list\n\n`curl -s \"https://api.trello.com/1/lists/\u003Clist-id>/cards?key=\u003CapiKey>&token=\u003CapiToken>\"`\n\n## Create card\n\nThe card name is the title and the description holds the body. Use `--data-urlencode` so spaces and line breaks survive:\n\n`curl -s -X POST \"https://api.trello.com/1/cards?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"idList=\u003Clist-id>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n\n## Move card\n\n`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>&idList=\u003Clist-id>\"`\n\n## Update card\n\nSame endpoint as moving, just pass whichever fields changed:\n\n`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n\n## Delete card\n\n`curl -s -X DELETE \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\"`\n\n## Attach a URL\n\nAttach a link to a card, for example the PR you just opened:\n\n`curl -s -X POST \"https://api.trello.com/1/cards/\u003Ccard-id>/attachments?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"url=https://google.com\"`\n\n## Error handling\n\n- If `trello.json` is missing or malformed, stop and tell the user.\n- If the Trello API returns a non-2xx status, show the error and stop.\n",".claude/skills/trello/SKILL.md",[67,403,404,409,421,431,435,439,444,448,453,457,468,472,478,483,494,505,516,523,534,545,556,565,570,575,581,586,592,597,603,608,614,619,631,636,642,647,653,658,664,669,675,680,686,691,697,702,708,713,719,724,730,735,741,746,752,757,763,768,781],{"__ignoreMap":65},[70,405,406],{"class":72,"line":73},[70,407,408],{"class":80},"---\n",[70,410,411,415,417],{"class":72,"line":160},[70,412,414],{"class":413},"s8I7P","name",[70,416,287],{"class":80},[70,418,420],{"class":419},"s_Ekj","trello\n",[70,422,423,426,428],{"class":72,"line":167},[70,424,425],{"class":413},"description",[70,427,287],{"class":80},[70,429,430],{"class":419},"Interacts with a Trello board. Triggered by \"/trello\".\n",[70,432,433],{"class":72,"line":175},[70,434,408],{"class":80},[70,436,437],{"class":72,"line":183},[70,438,164],{"emptyLinePlaceholder":163},[70,440,441],{"class":72,"line":191},[70,442,443],{"class":80},"Use this skill whenever the user asks you to read, create, update, delete, or move cards.\n",[70,445,446],{"class":72,"line":340},[70,447,164],{"emptyLinePlaceholder":163},[70,449,450],{"class":72,"line":352},[70,451,452],{"class":156},"## Credentials\n",[70,454,455],{"class":72,"line":364},[70,456,164],{"emptyLinePlaceholder":163},[70,458,459,462,465],{"class":72,"line":375},[70,460,461],{"class":80},"Read board credentials from ",[70,463,464],{"class":84},"`trello.json`",[70,466,467],{"class":80}," in the project root:\n",[70,469,470],{"class":72,"line":381},[70,471,164],{"emptyLinePlaceholder":163},[70,473,475],{"class":72,"line":474},12,[70,476,477],{"class":80},"```json\n",[70,479,481],{"class":72,"line":480},13,[70,482,278],{"class":80},[70,484,486,488,490,492],{"class":72,"line":485},14,[70,487,284],{"class":283},[70,489,287],{"class":80},[70,491,291],{"class":290},[70,493,294],{"class":80},[70,495,497,499,501,503],{"class":72,"line":496},15,[70,498,299],{"class":283},[70,500,287],{"class":80},[70,502,291],{"class":290},[70,504,294],{"class":80},[70,506,508,510,512,514],{"class":72,"line":507},16,[70,509,310],{"class":283},[70,511,287],{"class":80},[70,513,315],{"class":290},[70,515,294],{"class":80},[70,517,519,521],{"class":72,"line":518},17,[70,520,322],{"class":283},[70,522,325],{"class":80},[70,524,526,528,530,532],{"class":72,"line":525},18,[70,527,330],{"class":283},[70,529,287],{"class":80},[70,531,335],{"class":290},[70,533,294],{"class":80},[70,535,537,539,541,543],{"class":72,"line":536},19,[70,538,343],{"class":283},[70,540,287],{"class":80},[70,542,335],{"class":290},[70,544,294],{"class":80},[70,546,548,550,552,554],{"class":72,"line":547},20,[70,549,355],{"class":283},[70,551,287],{"class":80},[70,553,335],{"class":290},[70,555,294],{"class":80},[70,557,559,561,563],{"class":72,"line":558},21,[70,560,367],{"class":283},[70,562,287],{"class":80},[70,564,372],{"class":290},[70,566,568],{"class":72,"line":567},22,[70,569,378],{"class":80},[70,571,573],{"class":72,"line":572},23,[70,574,384],{"class":80},[70,576,578],{"class":72,"line":577},24,[70,579,580],{"class":80},"```\n",[70,582,584],{"class":72,"line":583},25,[70,585,164],{"emptyLinePlaceholder":163},[70,587,589],{"class":72,"line":588},26,[70,590,591],{"class":156},"## Read list\n",[70,593,595],{"class":72,"line":594},27,[70,596,164],{"emptyLinePlaceholder":163},[70,598,600],{"class":72,"line":599},28,[70,601,602],{"class":84},"`curl -s \"https://api.trello.com/1/lists/\u003Clist-id>/cards?key=\u003CapiKey>&token=\u003CapiToken>\"`\n",[70,604,606],{"class":72,"line":605},29,[70,607,164],{"emptyLinePlaceholder":163},[70,609,611],{"class":72,"line":610},30,[70,612,613],{"class":156},"## Create card\n",[70,615,617],{"class":72,"line":616},31,[70,618,164],{"emptyLinePlaceholder":163},[70,620,622,625,628],{"class":72,"line":621},32,[70,623,624],{"class":80},"The card name is the title and the description holds the body. Use ",[70,626,627],{"class":84},"`--data-urlencode`",[70,629,630],{"class":80}," so spaces and line breaks survive:\n",[70,632,634],{"class":72,"line":633},33,[70,635,164],{"emptyLinePlaceholder":163},[70,637,639],{"class":72,"line":638},34,[70,640,641],{"class":84},"`curl -s -X POST \"https://api.trello.com/1/cards?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"idList=\u003Clist-id>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n",[70,643,645],{"class":72,"line":644},35,[70,646,164],{"emptyLinePlaceholder":163},[70,648,650],{"class":72,"line":649},36,[70,651,652],{"class":156},"## Move card\n",[70,654,656],{"class":72,"line":655},37,[70,657,164],{"emptyLinePlaceholder":163},[70,659,661],{"class":72,"line":660},38,[70,662,663],{"class":84},"`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>&idList=\u003Clist-id>\"`\n",[70,665,667],{"class":72,"line":666},39,[70,668,164],{"emptyLinePlaceholder":163},[70,670,672],{"class":72,"line":671},40,[70,673,674],{"class":156},"## Update card\n",[70,676,678],{"class":72,"line":677},41,[70,679,164],{"emptyLinePlaceholder":163},[70,681,683],{"class":72,"line":682},42,[70,684,685],{"class":80},"Same endpoint as moving, just pass whichever fields changed:\n",[70,687,689],{"class":72,"line":688},43,[70,690,164],{"emptyLinePlaceholder":163},[70,692,694],{"class":72,"line":693},44,[70,695,696],{"class":84},"`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n",[70,698,700],{"class":72,"line":699},45,[70,701,164],{"emptyLinePlaceholder":163},[70,703,705],{"class":72,"line":704},46,[70,706,707],{"class":156},"## Delete card\n",[70,709,711],{"class":72,"line":710},47,[70,712,164],{"emptyLinePlaceholder":163},[70,714,716],{"class":72,"line":715},48,[70,717,718],{"class":84},"`curl -s -X DELETE \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\"`\n",[70,720,722],{"class":72,"line":721},49,[70,723,164],{"emptyLinePlaceholder":163},[70,725,727],{"class":72,"line":726},50,[70,728,729],{"class":156},"## Attach a URL\n",[70,731,733],{"class":72,"line":732},51,[70,734,164],{"emptyLinePlaceholder":163},[70,736,738],{"class":72,"line":737},52,[70,739,740],{"class":80},"Attach a link to a card, for example the PR you just opened:\n",[70,742,744],{"class":72,"line":743},53,[70,745,164],{"emptyLinePlaceholder":163},[70,747,749],{"class":72,"line":748},54,[70,750,751],{"class":84},"`curl -s -X POST \"https://api.trello.com/1/cards/\u003Ccard-id>/attachments?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"url=https://google.com\"`\n",[70,753,755],{"class":72,"line":754},55,[70,756,164],{"emptyLinePlaceholder":163},[70,758,760],{"class":72,"line":759},56,[70,761,762],{"class":156},"## Error handling\n",[70,764,766],{"class":72,"line":765},57,[70,767,164],{"emptyLinePlaceholder":163},[70,769,771,773,776,778],{"class":72,"line":770},58,[70,772,77],{"class":76},[70,774,775],{"class":80}," If ",[70,777,464],{"class":84},[70,779,780],{"class":80}," is missing or malformed, stop and tell the user.\n",[70,782,784,786],{"class":72,"line":783},59,[70,785,77],{"class":76},[70,787,788],{"class":80}," If the Trello API returns a non-2xx status, show the error and stop.\n",[38,790,792],{"id":791},"the-orchestrator-skill","The Orchestrator Skill",[11,794,795],{},"Great! Now that we have skills that know how to deal with Trello and GitHub, we can create an orchestrator skill that makes use of both.",[59,797,800],{"className":61,"code":798,"filename":799,"language":64,"meta":65,"style":65},"---\nname: tackle-task\ndescription: Pick the first card in the Trello \"To Do\" list, build the feature it describes, open a PR, and move the card to \"Under Review\".\n---\n\n## Steps\n\n1. Use `/trello` to read the first card in \"To Do\". If the list is empty, stop here.\n2. Use `/trello` to move that card to \"Doing\".\n3. Treat the card's title and description as the feature spec and build it, following the conventions already in the codebase.\n4. Use `/github-pr main` to open the pull request. If this card builds on an earlier one, target that branch instead so the PRs stack: `/github-pr \u003Cbase-branch>`.\n5. Use `/trello` to move the card to \"Under Review\" and attach the PR link.\n",".claude/skills/tackle-task/SKILL.md",[67,801,802,806,815,824,828,832,837,841,855,867,875,894],{"__ignoreMap":65},[70,803,804],{"class":72,"line":73},[70,805,408],{"class":80},[70,807,808,810,812],{"class":72,"line":160},[70,809,414],{"class":413},[70,811,287],{"class":80},[70,813,814],{"class":419},"tackle-task\n",[70,816,817,819,821],{"class":72,"line":167},[70,818,425],{"class":413},[70,820,287],{"class":80},[70,822,823],{"class":419},"Pick the first card in the Trello \"To Do\" list, build the feature it describes, open a PR, and move the card to \"Under Review\".\n",[70,825,826],{"class":72,"line":175},[70,827,408],{"class":80},[70,829,830],{"class":72,"line":183},[70,831,164],{"emptyLinePlaceholder":163},[70,833,834],{"class":72,"line":191},[70,835,836],{"class":156},"## Steps\n",[70,838,839],{"class":72,"line":340},[70,840,164],{"emptyLinePlaceholder":163},[70,842,843,846,849,852],{"class":72,"line":352},[70,844,845],{"class":76},"1.",[70,847,848],{"class":80}," Use ",[70,850,851],{"class":84},"`/trello`",[70,853,854],{"class":80}," to read the first card in \"To Do\". If the list is empty, stop here.\n",[70,856,857,860,862,864],{"class":72,"line":364},[70,858,859],{"class":76},"2.",[70,861,848],{"class":80},[70,863,851],{"class":84},[70,865,866],{"class":80}," to move that card to \"Doing\".\n",[70,868,869,872],{"class":72,"line":375},[70,870,871],{"class":76},"3.",[70,873,874],{"class":80}," Treat the card's title and description as the feature spec and build it, following the conventions already in the codebase.\n",[70,876,877,880,882,885,888,891],{"class":72,"line":381},[70,878,879],{"class":76},"4.",[70,881,848],{"class":80},[70,883,884],{"class":84},"`/github-pr main`",[70,886,887],{"class":80}," to open the pull request. If this card builds on an earlier one, target that branch instead so the PRs stack: ",[70,889,890],{"class":84},"`/github-pr \u003Cbase-branch>`",[70,892,893],{"class":80},".\n",[70,895,896,899,901,903],{"class":72,"line":474},[70,897,898],{"class":76},"5.",[70,900,848],{"class":80},[70,902,851],{"class":84},[70,904,905],{"class":80}," to move the card to \"Under Review\" and attach the PR link.\n",[11,907,908,909,911,912,914],{},"As you can see, this skill never explains how to name a branch, write a PR body, or talk to GitHub. It delegates all of that to ",[67,910,91],{},". Same goes for the Trello operations: saying \"move card to Doing\" is enough, since ",[67,913,396],{}," knows how to do it.",[11,916,917],{},"Each skill stays small, and neither has to absorb the other's job.",[38,919,921],{"id":920},"running-the-whole-board","Running the Whole Board",[11,923,924],{},"Because the workflow lives in skills rather than in my head, scaling from one card to the entire backlog takes a single instruction:",[15,926,927],{},[11,928,929],{},"Sequentially tackle every task in our Trello.",[11,931,932],{},"That's it! That instruction makes the agent work until we have no more cards in \"To Do\".",[11,934,935,936,939],{},"The end result is a bunch of PRs in GitHub, ready for human review. Yeah, ",[256,937,938],{},"human review:"," I think it's important to take a moment to read the code the clanker generated. We saved so much time already (not only in the coding aspect, but all the ceremony that goes with it: writing PRs, moving cards, etc.) that taking a look can't hurt anyone... and can save you from shipping slop.",[38,941,943],{"id":942},"designing-skills-that-stack","Designing Skills That Stack",[11,945,946],{},"A few principles made the difference between skills that compose cleanly and skills that fight each other:",[123,948,949,965,979,987],{},[126,950,951,954,955,957,958,960,961,964],{},[52,952,953],{},"One job per skill."," ",[67,956,91],{}," only knows how to open a PR, and ",[67,959,396],{}," only knows how to talk to the board. That's exactly why ",[67,962,963],{},"/tackle-task"," can lean on both without dragging their guts into its own instructions.",[126,966,967,970,971,974,975,978],{},[52,968,969],{},"Give each skill a small handle to grab."," The base-branch argument is the whole reason ",[67,972,973],{},"/github-pr main"," and ",[67,976,977],{},"/github-pr some-feature"," both work. One little parameter turns a fixed command into a building block.",[126,980,981,954,984,986],{},[52,982,983],{},"Let the orchestrator do the deciding.",[67,985,963],{}," owns the order of things and the \"does this card stack on another?\" call. The skills it invokes never need to know that context exists.",[126,988,989,992,993,995],{},[52,990,991],{},"Stop when something looks off."," An empty \"To Do\" list, a missing ",[67,994,265],{},", a non-2xx from the API: any of those halts the run instead of quietly plowing ahead and making a mess you have to untangle later.",[11,997,998],{},"None of this depends on an exotic feature. It's the same design thinking you already apply to code, pointed at the skills your agent runs.",[38,1000,1002],{"id":1001},"where-this-goes","Where This Goes",[11,1004,1005],{},"Once you start seeing skills as stackable recipes, it's hard not to notice more places to apply them.",[11,1007,1008],{},"The one I'm building now checks my inbox, reads emails from my app users, turns their requests into Trello cards, works on them, opens a PR for each one, and drafts an email reply for me to send later.",[11,1010,1011],{},"Here's a challenge for you: think about what you can automate with skills. Build it, and let me know how it goes!",[1013,1014,1015],"style",{},"html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .szGx7, html code.shiki .szGx7{--shiki-default:#FD971F}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .ssRA_, html code.shiki .ssRA_{--shiki-default:#A6E22E;--shiki-default-font-weight:bold}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .susgL, html code.shiki .susgL{--shiki-default:#CFCFC2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}",{"title":65,"searchDepth":160,"depth":160,"links":1017},[1018,1019,1020,1021,1022,1023,1024],{"id":40,"depth":160,"text":41},{"id":101,"depth":160,"text":102},{"id":250,"depth":160,"text":251},{"id":791,"depth":160,"text":792},{"id":920,"depth":160,"text":921},{"id":942,"depth":160,"text":943},{"id":1001,"depth":160,"text":1002},"AI","2026-07-09","A single skill removes one repetitive task. Stacking skills, letting one call another, turns a backlog into a workflow your agent can run end to end.",false,"/img/blog/advanced-agentic-workflows-with-stacked-skills.png",{},"/blog/advanced-agentic-workflows-with-stacked-skills",{"title":6,"description":1027},"blog/advanced-agentic-workflows-with-stacked-skills","dhbCP-c8nD_KIMpxzUk_rO96Kxg8PL8uJl3vdqTIGwM",{"id":1036,"title":1037,"body":1038,"category":1025,"date":2375,"description":2376,"draft":1028,"extension":64,"image":2377,"meta":2378,"navigation":163,"path":48,"seo":2379,"stem":2380,"tighten":1028,"__hash__":2381},"blog/blog/skills-i-know-kung-fu.md","Skills: I Know Kung Fu!",{"type":8,"value":1039,"toc":2365},[1040,1051,1058,1061,1064,1073,1076,1081,1091,1095,1098,1101,1115,1120,1134,1137,1178,1181,1199,1211,1217,1220,1224,1231,1236,1239,1242,1259,1262,1277,1285,1290,1486,1496,1512,1515,1518,1522,1525,1530,1533,1573,1576,1586,1592,1596,1603,1606,1646,1653,1656,1660,1666,1669,1689,1692,1698,1704,1723,1726,2046,2056,2062,2257,2264,2323,2329,2332,2334,2338,2341,2344,2353,2359,2362],[11,1041,1042,1043,1046,1047,1050],{},"There's this famous scene in ",[256,1044,1045],{},"The Matrix"," where Neo gets a ",[256,1048,1049],{},"software update"," that instantly teaches him Kung Fu. I'd love that in real life! Maybe then I could finally play the keyboard without sounding like a cat walked across it.",[11,1052,1053,1054,1057],{},"Unfortunately, we don't have that. But we do have ",[52,1055,1056],{},"skills for our agents",", which, while not nearly as cool, can still save you a big chunk of time.",[11,1059,1060],{},"Think about everything you asked Claude to do this week. Was there one request you found yourself repeating over and over, using almost the exact same prompt?",[11,1062,1063],{},"For me, it's creating GitHub PRs.",[15,1065,1066],{},[11,1067,1068,1069,1072],{},"Open a PR. Keep the description short. No emojis. Don't list yourself as a co-author. Don't use the word ",[256,1070,1071],{},"seamlessly","...",[11,1074,1075],{},"I'd type it, the agent would do a decent job, and a couple of hours later I'd find myself typing the exact same thing again for the next branch.",[15,1077,1078],{},[11,1079,1080],{},"Open a PR. Short description. No emojis...",[11,1082,1083,1084,1087,1088],{},"You know the saying, ",[256,1085,1086],{},"\"This meeting could have been an email\"?"," That's how I feel every time I catch myself repeating a prompt: ",[256,1089,1090],{},"\"This prompt should have been a skill.\"",[38,1092,1094],{"id":1093},"what-is-a-skill","What Is a Skill?",[11,1096,1097],{},"A skill is a recipe you write once so the agent can perform the same task over and over without you narrating every step again.",[11,1099,1100],{},"Unlike a prompt, a skill can bring along everything the task needs: scripts, references, templates, rules, etc.",[11,1102,1103,1104,1107,1108,1111,1112,1114],{},"You create a folder under ",[67,1105,1106],{},".claude/skills/",". Call it whatever you like, for example ",[67,1109,1110],{},"joke",". Inside it, create a ",[67,1113,63],{}," file.",[11,1116,1117,1119],{},[67,1118,63],{}," should have two parts:",[123,1121,1122,1131],{},[126,1123,1124,1125,1127,1128,1130],{},"A frontmatter block with a ",[67,1126,414],{}," and a ",[67,1129,425],{},".",[126,1132,1133],{},"A markdown body with the actual instructions, written in natural language.",[11,1135,1136],{},"Here's an example:",[59,1138,1141],{"className":61,"code":1139,"filename":1140,"language":64,"meta":65,"style":65},"---\nname: joke\ndescription: Tells a funny joke.\n---\n\nTell me a funny joke. Extra points if it is about programmers!\n",".claude/skills/joke/SKILL.md",[67,1142,1143,1147,1156,1165,1169,1173],{"__ignoreMap":65},[70,1144,1145],{"class":72,"line":73},[70,1146,408],{"class":80},[70,1148,1149,1151,1153],{"class":72,"line":160},[70,1150,414],{"class":413},[70,1152,287],{"class":80},[70,1154,1155],{"class":419},"joke\n",[70,1157,1158,1160,1162],{"class":72,"line":167},[70,1159,425],{"class":413},[70,1161,287],{"class":80},[70,1163,1164],{"class":419},"Tells a funny joke.\n",[70,1166,1167],{"class":72,"line":175},[70,1168,408],{"class":80},[70,1170,1171],{"class":72,"line":183},[70,1172,164],{"emptyLinePlaceholder":163},[70,1174,1175],{"class":72,"line":191},[70,1176,1177],{"class":80},"Tell me a funny joke. Extra points if it is about programmers!\n",[11,1179,1180],{},"To use a skill, you can either:",[123,1182,1183,1193],{},[126,1184,1185,1188,1189,1192],{},[52,1186,1187],{},"Invoke it as a command:"," type a slash followed by the skill's name, e.g. ",[67,1190,1191],{},"/joke",", and press enter.",[126,1194,1195,1198],{},[52,1196,1197],{},"Ask in natural language:"," if the skill's description matches what you asked the agent to do, Claude will automatically pick it up. Here, something like \"tell me a joke\" will do.",[1200,1201,1204],"callout",{"color":1202,"icon":1203},"#057ccd","fa6-solid:circle-info",[11,1205,1206,1207,1210],{},"If you'd rather invoke the skill explicitly every time, add ",[67,1208,1209],{},"disable-model-invocation: true"," to the frontmatter.",[11,1212,1213,1214,1216],{},"The ",[67,1215,425],{}," is more important than it looks. Whenever you ask Claude to do something, it uses the descriptions of your available skills to decide whether one matches the request.",[11,1218,1219],{},"If the description is vague, the skill rarely gets used. If it's specific, Claude starts reaching for it automatically.",[38,1221,1223],{"id":1222},"a-skill-is-a-folder-not-just-a-file","A Skill Is a Folder, Not Just a File",[11,1225,1226,1227,1230],{},"So far we've only seen a single markdown file, but ",[52,1228,1229],{},"a skill is really the entire folder"," around the markdown file. This folder can contain scripts, reference documents, templates, and anything else the workflow needs.",[1232,1233,1235],"h3",{"id":1234},"tip-1-skills-can-execute-scripts","Tip 1: Skills Can Execute Scripts",[11,1237,1238],{},"If you describe an action in natural language, the model is usually smart enough to figure out how to do it and write code on the fly to make it happen. Sometimes, though, you want something more predictable.",[11,1240,1241],{},"You can include commands and code snippets in your skills. So instead of saying \"Clear the logs\" and hoping the model does the right thing, you can simply tell it what to run:",[59,1243,1247],{"className":1244,"code":1245,"filename":63,"language":1246,"meta":65,"style":65},"language-diff shiki shiki-themes monokai","- Clear the logs.\n+ Run `rm -rf ./logs` to clear the logs.\n","diff",[67,1248,1249,1254],{"__ignoreMap":65},[70,1250,1251],{"class":72,"line":73},[70,1252,1253],{"class":413},"- Clear the logs.\n",[70,1255,1256],{"class":72,"line":160},[70,1257,1258],{"class":76},"+ Run `rm -rf ./logs` to clear the logs.\n",[11,1260,1261],{},"Once those scripts get more than a few lines long, you can move them into their own files.",[11,1263,1264,1265,1268,1269,1272,1273,1276],{},"Say I want a ",[67,1266,1267],{},"video-to-gif"," skill that turns a screen recording into a small GIF I can drop into an issue. To keep the colors from looking terrible, that's really a two-pass job: first build a color palette tailored to the video, then render the GIF using it. That's fiddly enough that I don't want the agent reconstructing the exact ",[67,1270,1271],{},"ffmpeg"," filters every time, so I drop a ",[67,1274,1275],{},"script.sh"," into the skill folder:",[59,1278,1283],{"className":1279,"code":1281,"language":1282,"meta":65},[1280],"language-text","📂 video-to-gif/\n├── 📄 SKILL.md\n└── ▶️ script.sh\n","text",[67,1284,1281],{"__ignoreMap":65},[11,1286,1287,1289],{},[67,1288,1275],{}," scales the video down to 420p, drops it to 12 frames per second, and squeezes it into a 64-color palette:",[59,1291,1295],{"className":1292,"code":1293,"filename":1275,"language":1294,"meta":65,"style":65},"language-shell shiki shiki-themes monokai","#!/usr/bin/env bash\nset -euo pipefail\nINPUT=\"${1:?usage: script.sh \u003Cinput-video>}\"\nOUTPUT=\"${2:-output.gif}\"\n\n# 1. build an optimized palette from the video\nffmpeg -i \"$INPUT\" -vf \"fps=12,scale=-1:420:flags=lanczos,palettegen=max_colors=64\" -y palette.png\n\n# 2. render the gif using that palette\nffmpeg -i \"$INPUT\" -i palette.png -lavfi \"fps=12,scale=-1:420:flags=lanczos[x];[x][1:v]paletteuse\" -y \"$OUTPUT\"\n\n# 3. clean up\nrm -f palette.png\n","shell",[67,1296,1297,1303,1316,1363,1390,1394,1399,1426,1430,1435,1467,1471,1476],{"__ignoreMap":65},[70,1298,1299],{"class":72,"line":73},[70,1300,1302],{"class":1301},"snpHw","#!/usr/bin/env bash\n",[70,1304,1305,1309,1313],{"class":72,"line":160},[70,1306,1308],{"class":1307},"sYf5A","set",[70,1310,1312],{"class":1311},"s7s5_"," -euo",[70,1314,1315],{"class":419}," pipefail\n",[70,1317,1318,1321,1324,1327,1331,1334,1337,1340,1343,1345,1348,1351,1354,1357,1360],{"class":72,"line":167},[70,1319,1320],{"class":80},"INPUT",[70,1322,1323],{"class":413},"=",[70,1325,1326],{"class":419},"\"",[70,1328,1330],{"class":1329},"sW0Xf","${1",[70,1332,1333],{"class":413},":?",[70,1335,1336],{"class":80},"usage",[70,1338,1339],{"class":413},":",[70,1341,1342],{"class":80}," script",[70,1344,1130],{"class":419},[70,1346,1347],{"class":80},"sh",[70,1349,1350],{"class":419}," \u003C",[70,1352,1353],{"class":80},"input-video",[70,1355,1356],{"class":419},">",[70,1358,1359],{"class":1329},"}",[70,1361,1362],{"class":419},"\"\n",[70,1364,1365,1368,1370,1372,1375,1378,1381,1383,1386,1388],{"class":72,"line":175},[70,1366,1367],{"class":80},"OUTPUT",[70,1369,1323],{"class":413},[70,1371,1326],{"class":419},[70,1373,1374],{"class":1329},"${2",[70,1376,1377],{"class":413},":-",[70,1379,1380],{"class":80},"output",[70,1382,1130],{"class":419},[70,1384,1385],{"class":80},"gif",[70,1387,1359],{"class":1329},[70,1389,1362],{"class":419},[70,1391,1392],{"class":72,"line":183},[70,1393,164],{"emptyLinePlaceholder":163},[70,1395,1396],{"class":72,"line":191},[70,1397,1398],{"class":1301},"# 1. build an optimized palette from the video\n",[70,1400,1401,1403,1406,1409,1412,1414,1417,1420,1423],{"class":72,"line":340},[70,1402,1271],{"class":76},[70,1404,1405],{"class":1311}," -i",[70,1407,1408],{"class":419}," \"",[70,1410,1411],{"class":80},"$INPUT",[70,1413,1326],{"class":419},[70,1415,1416],{"class":1311}," -vf",[70,1418,1419],{"class":419}," \"fps=12,scale=-1:420:flags=lanczos,palettegen=max_colors=64\"",[70,1421,1422],{"class":1311}," -y",[70,1424,1425],{"class":419}," palette.png\n",[70,1427,1428],{"class":72,"line":352},[70,1429,164],{"emptyLinePlaceholder":163},[70,1431,1432],{"class":72,"line":364},[70,1433,1434],{"class":1301},"# 2. render the gif using that palette\n",[70,1436,1437,1439,1441,1443,1445,1447,1449,1452,1455,1458,1460,1462,1465],{"class":72,"line":375},[70,1438,1271],{"class":76},[70,1440,1405],{"class":1311},[70,1442,1408],{"class":419},[70,1444,1411],{"class":80},[70,1446,1326],{"class":419},[70,1448,1405],{"class":1311},[70,1450,1451],{"class":419}," palette.png",[70,1453,1454],{"class":1311}," -lavfi",[70,1456,1457],{"class":419}," \"fps=12,scale=-1:420:flags=lanczos[x];[x][1:v]paletteuse\"",[70,1459,1422],{"class":1311},[70,1461,1408],{"class":419},[70,1463,1464],{"class":80},"$OUTPUT",[70,1466,1362],{"class":419},[70,1468,1469],{"class":72,"line":381},[70,1470,164],{"emptyLinePlaceholder":163},[70,1472,1473],{"class":72,"line":474},[70,1474,1475],{"class":1301},"# 3. clean up\n",[70,1477,1478,1481,1484],{"class":72,"line":480},[70,1479,1480],{"class":76},"rm",[70,1482,1483],{"class":1311}," -f",[70,1485,1425],{"class":419},[11,1487,1488,1489,1491,1492,1495],{},"Then inside ",[67,1490,63],{},", I simply reference it with ",[67,1493,1494],{},"${CLAUDE_SKILL_DIR}"," so the path works no matter where the skill is invoked from:",[59,1497,1499],{"className":61,"code":1498,"language":64,"meta":65,"style":65},"Run `${CLAUDE_SKILL_DIR}/script.sh \u003Crecording.mov>` to produce the GIF.\n",[67,1500,1501],{"__ignoreMap":65},[70,1502,1503,1506,1509],{"class":72,"line":73},[70,1504,1505],{"class":80},"Run ",[70,1507,1508],{"class":84},"`${CLAUDE_SKILL_DIR}/script.sh \u003Crecording.mov>`",[70,1510,1511],{"class":80}," to produce the GIF.\n",[11,1513,1514],{},"The script gets executed, not pasted into the conversation, so it doesn't consume context. The agent simply runs it, captures the result, and moves on.",[11,1516,1517],{},"Anything mechanical and deterministic belongs in a script anyway. It's faster, cheaper, and usually more reliable than asking the model to work out the same commands from scratch every single time.",[1232,1519,1521],{"id":1520},"tip-2-skills-can-load-reference-files","Tip 2: Skills Can Load Reference Files",[11,1523,1524],{},"The same idea works for knowledge.",[11,1526,1527,1528,1130],{},"If a skill depends on a long reference—API documentation, a style guide, naming conventions, or some giant formatting spec—you don't have to cram it all into ",[67,1529,63],{},[11,1531,1532],{},"Instead, drop it into a dedicated file and reference it:",[59,1534,1536],{"className":61,"code":1535,"filename":63,"language":64,"meta":65,"style":65},"- If the project uses React, follow [react_rules.md](react_rules.md).\n- If the project uses Vue, use [vue_rules.md](vue_rules.md) instead.\n",[67,1537,1538,1556],{"__ignoreMap":65},[70,1539,1540,1542,1545,1548,1551,1553],{"class":72,"line":73},[70,1541,77],{"class":76},[70,1543,1544],{"class":80}," If the project uses React, follow [",[70,1546,1547],{"class":1311},"react_rules.md",[70,1549,1550],{"class":80},"](",[70,1552,1547],{"class":419},[70,1554,1555],{"class":80},").\n",[70,1557,1558,1560,1563,1566,1568,1570],{"class":72,"line":160},[70,1559,77],{"class":76},[70,1561,1562],{"class":80}," If the project uses Vue, use [",[70,1564,1565],{"class":1311},"vue_rules.md",[70,1567,1550],{"class":80},[70,1569,1565],{"class":419},[70,1571,1572],{"class":80},") instead.\n",[11,1574,1575],{},"Claude only reads the file it actually needs.",[11,1577,1578,1579,1582,1583,1585],{},"This pattern is called ",[52,1580,1581],{},"progressive disclosure",". The body of ",[67,1584,63],{}," is loaded when the skill is invoked, and any referenced files are read only if the task actually requires them.",[11,1587,1588,1589,1591],{},"Anthropic recommends keeping ",[67,1590,63],{}," under 500 lines and pushing heavier details into supporting files. After using skills for a while, that advice makes a lot of sense.",[1232,1593,1595],{"id":1594},"tip-3-skills-can-pre-approve-tools","Tip 3: Skills Can Pre-Approve Tools",[11,1597,1598,1599,1602],{},"You can add an ",[67,1600,1601],{},"allowed-tools"," line in the frontmatter to pre-approve specific tools, so a mostly mechanical skill doesn't keep stopping to ask for permission.",[11,1604,1605],{},"This is especially useful for skills that always perform the same safe operations, like running checks, formatting code, or committing.",[59,1607,1609],{"className":61,"code":1608,"language":64,"meta":65,"style":65},"---\nname: commit\ndescription: Stage and commit the current changes with a concise message.\nallowed-tools: Bash(git add *) Bash(git commit *)\n---\n",[67,1610,1611,1615,1624,1633,1642],{"__ignoreMap":65},[70,1612,1613],{"class":72,"line":73},[70,1614,408],{"class":80},[70,1616,1617,1619,1621],{"class":72,"line":160},[70,1618,414],{"class":413},[70,1620,287],{"class":80},[70,1622,1623],{"class":419},"commit\n",[70,1625,1626,1628,1630],{"class":72,"line":167},[70,1627,425],{"class":413},[70,1629,287],{"class":80},[70,1631,1632],{"class":419},"Stage and commit the current changes with a concise message.\n",[70,1634,1635,1637,1639],{"class":72,"line":175},[70,1636,1601],{"class":413},[70,1638,287],{"class":80},[70,1640,1641],{"class":419},"Bash(git add *) Bash(git commit *)\n",[70,1643,1644],{"class":72,"line":183},[70,1645,408],{"class":80},[11,1647,1648,1649,1652],{},"The opposite works too: use the ",[67,1650,1651],{},"disallowed-tools"," field to block specific tools.",[1654,1655],"hr",{},[38,1657,1659],{"id":1658},"turning-a-repetitive-workflow-into-a-skill","Turning a Repetitive Workflow Into a Skill",[11,1661,1662,1663,1665],{},"Now, we can put all these tips into action to create our full ",[67,1664,91],{}," skill.",[11,1667,1668],{},"As I said at the beginning, the routine I got tired of looked something like this:",[123,1670,1671,1674,1677,1680,1683,1686],{},[126,1672,1673],{},"Branch off the default branch.",[126,1675,1676],{},"Stage the changes.",[126,1678,1679],{},"Read the full diff instead of trusting the commit messages.",[126,1681,1682],{},"With that information, write a descriptive title and short description.",[126,1684,1685],{},"Open the PR in GitHub.",[126,1687,1688],{},"Request a review from Copilot, GitHub's automated code review bot.",[11,1690,1691],{},"So let's turn that workflow into something the agent can execute.",[11,1693,1694,1695,1697],{},"Instead of cramming everything into one giant ",[67,1696,63],{},", let's split it into different files:",[59,1699,1702],{"className":1700,"code":1701,"language":1282,"meta":65},[1280],"📂 github-pr/\n├── 📄 SKILL.md\n├── 📄 pull_request_description_template.md\n└── ▶️ rebase.sh\n",[67,1703,1701],{"__ignoreMap":65},[123,1705,1706,1711,1717],{},[126,1707,1708,1710],{},[67,1709,63],{}," is the main recipe.",[126,1712,1713,1716],{},[67,1714,1715],{},"pull_request_description_template.md"," is the PR description base.",[126,1718,1719,1722],{},[67,1720,1721],{},"rebase.sh"," handles the one mechanical step that's worth scripting.",[11,1724,1725],{},"Let's review each, starting with the skill file:",[59,1727,1729],{"className":61,"code":1728,"filename":63,"language":64,"meta":65,"style":65},"---\nname: github-pr\ndescription: Create a GitHub PR with a concise description.\nallowed-tools: Bash(git *) Bash(gh pr create *)\n---\n\n# GitHub PR Skill\n\nOpen a pull request with a short, descriptive title and a clear description.\n\n## Usage\n\n`/github-pr \u003Ctarget-branch>`\n\n## Steps\n\n1. Find the default branch if no target was given:\n\n`git remote show origin | sed -n 's/.*HEAD branch: //p'`\n\n2. Move the current changes onto a fresh feature branch, on top of the latest target. Name the branch after the change (e.g. \"add-user-profile\", \"fix-cart-rounding\"):\n\n`${CLAUDE_SKILL_DIR}/rebase.sh \u003Ctarget> \u003Cfeature-branch>`\n\n3. Read the full diff so the description reflects what actually changed:\n\n`git diff \u003Ctarget>...HEAD`\n\n4. Draft the PR body from [pull_request_description_template.md](pull_request_description_template.md), filling it in from the diff. Keep the title concise and descriptive (\"Add user profile page\").\n\n5. Push the branch and open the PR:\n\n```sh\ngit push --set-upstream origin \"$(git branch --show-current)\"\ngh pr create --base \u003Ctarget> --title \"\u003Ctitle>\" --body-file - \u003C\u003C'EOF'\n\u003Cthe filled-in PR body>\nEOF\n```\n\n## Tone\n\nWrite plainly. No bold labels on bullets. No AI tells (\"seamlessly\", \"leverage\", \"robust\", \"ensures that\"). No hyphens or em dashes as sentence connectors.\n\n## Rules\n\n- No co-authors.\n- No screenshots.\n- Descriptive title required.\n",[67,1730,1731,1735,1744,1753,1762,1766,1770,1775,1779,1784,1788,1793,1797,1802,1806,1810,1814,1821,1825,1830,1834,1841,1845,1850,1854,1861,1865,1870,1874,1890,1894,1901,1905,1910,1938,1980,1985,1990,1994,1998,2003,2007,2012,2016,2021,2025,2032,2039],{"__ignoreMap":65},[70,1732,1733],{"class":72,"line":73},[70,1734,408],{"class":80},[70,1736,1737,1739,1741],{"class":72,"line":160},[70,1738,414],{"class":413},[70,1740,287],{"class":80},[70,1742,1743],{"class":419},"github-pr\n",[70,1745,1746,1748,1750],{"class":72,"line":167},[70,1747,425],{"class":413},[70,1749,287],{"class":80},[70,1751,1752],{"class":419},"Create a GitHub PR with a concise description.\n",[70,1754,1755,1757,1759],{"class":72,"line":175},[70,1756,1601],{"class":413},[70,1758,287],{"class":80},[70,1760,1761],{"class":419},"Bash(git *) Bash(gh pr create *)\n",[70,1763,1764],{"class":72,"line":183},[70,1765,408],{"class":80},[70,1767,1768],{"class":72,"line":191},[70,1769,164],{"emptyLinePlaceholder":163},[70,1771,1772],{"class":72,"line":340},[70,1773,1774],{"class":156},"# GitHub PR Skill\n",[70,1776,1777],{"class":72,"line":352},[70,1778,164],{"emptyLinePlaceholder":163},[70,1780,1781],{"class":72,"line":364},[70,1782,1783],{"class":80},"Open a pull request with a short, descriptive title and a clear description.\n",[70,1785,1786],{"class":72,"line":375},[70,1787,164],{"emptyLinePlaceholder":163},[70,1789,1790],{"class":72,"line":381},[70,1791,1792],{"class":156},"## Usage\n",[70,1794,1795],{"class":72,"line":474},[70,1796,164],{"emptyLinePlaceholder":163},[70,1798,1799],{"class":72,"line":480},[70,1800,1801],{"class":84},"`/github-pr \u003Ctarget-branch>`\n",[70,1803,1804],{"class":72,"line":485},[70,1805,164],{"emptyLinePlaceholder":163},[70,1807,1808],{"class":72,"line":496},[70,1809,836],{"class":156},[70,1811,1812],{"class":72,"line":507},[70,1813,164],{"emptyLinePlaceholder":163},[70,1815,1816,1818],{"class":72,"line":518},[70,1817,845],{"class":76},[70,1819,1820],{"class":80}," Find the default branch if no target was given:\n",[70,1822,1823],{"class":72,"line":525},[70,1824,164],{"emptyLinePlaceholder":163},[70,1826,1827],{"class":72,"line":536},[70,1828,1829],{"class":84},"`git remote show origin | sed -n 's/.*HEAD branch: //p'`\n",[70,1831,1832],{"class":72,"line":547},[70,1833,164],{"emptyLinePlaceholder":163},[70,1835,1836,1838],{"class":72,"line":558},[70,1837,859],{"class":76},[70,1839,1840],{"class":80}," Move the current changes onto a fresh feature branch, on top of the latest target. Name the branch after the change (e.g. \"add-user-profile\", \"fix-cart-rounding\"):\n",[70,1842,1843],{"class":72,"line":567},[70,1844,164],{"emptyLinePlaceholder":163},[70,1846,1847],{"class":72,"line":572},[70,1848,1849],{"class":84},"`${CLAUDE_SKILL_DIR}/rebase.sh \u003Ctarget> \u003Cfeature-branch>`\n",[70,1851,1852],{"class":72,"line":577},[70,1853,164],{"emptyLinePlaceholder":163},[70,1855,1856,1858],{"class":72,"line":583},[70,1857,871],{"class":76},[70,1859,1860],{"class":80}," Read the full diff so the description reflects what actually changed:\n",[70,1862,1863],{"class":72,"line":588},[70,1864,164],{"emptyLinePlaceholder":163},[70,1866,1867],{"class":72,"line":594},[70,1868,1869],{"class":84},"`git diff \u003Ctarget>...HEAD`\n",[70,1871,1872],{"class":72,"line":599},[70,1873,164],{"emptyLinePlaceholder":163},[70,1875,1876,1878,1881,1883,1885,1887],{"class":72,"line":605},[70,1877,879],{"class":76},[70,1879,1880],{"class":80}," Draft the PR body from [",[70,1882,1715],{"class":1311},[70,1884,1550],{"class":80},[70,1886,1715],{"class":419},[70,1888,1889],{"class":80},"), filling it in from the diff. Keep the title concise and descriptive (\"Add user profile page\").\n",[70,1891,1892],{"class":72,"line":610},[70,1893,164],{"emptyLinePlaceholder":163},[70,1895,1896,1898],{"class":72,"line":616},[70,1897,898],{"class":76},[70,1899,1900],{"class":80}," Push the branch and open the PR:\n",[70,1902,1903],{"class":72,"line":621},[70,1904,164],{"emptyLinePlaceholder":163},[70,1906,1907],{"class":72,"line":633},[70,1908,1909],{"class":80},"```sh\n",[70,1911,1912,1915,1918,1921,1924,1927,1929,1932,1935],{"class":72,"line":638},[70,1913,1914],{"class":76},"git",[70,1916,1917],{"class":419}," push",[70,1919,1920],{"class":1311}," --set-upstream",[70,1922,1923],{"class":419}," origin",[70,1925,1926],{"class":419}," \"$(",[70,1928,1914],{"class":76},[70,1930,1931],{"class":419}," branch ",[70,1933,1934],{"class":1311},"--show-current",[70,1936,1937],{"class":419},")\"\n",[70,1939,1940,1943,1946,1949,1952,1954,1957,1960,1962,1965,1968,1971,1974,1977],{"class":72,"line":644},[70,1941,1942],{"class":76},"gh",[70,1944,1945],{"class":419}," pr",[70,1947,1948],{"class":419}," create",[70,1950,1951],{"class":1311}," --base",[70,1953,1350],{"class":413},[70,1955,1956],{"class":419},"targe",[70,1958,1959],{"class":80},"t",[70,1961,1356],{"class":413},[70,1963,1964],{"class":1311}," --title",[70,1966,1967],{"class":419}," \"\u003Ctitle>\"",[70,1969,1970],{"class":1311}," --body-file",[70,1972,1973],{"class":419}," -",[70,1975,1976],{"class":413}," \u003C\u003C",[70,1978,1979],{"class":80},"'EOF'\n",[70,1981,1982],{"class":72,"line":649},[70,1983,1984],{"class":419},"\u003Cthe filled-in PR body>\n",[70,1986,1987],{"class":72,"line":655},[70,1988,1989],{"class":80},"EOF\n",[70,1991,1992],{"class":72,"line":660},[70,1993,580],{"class":80},[70,1995,1996],{"class":72,"line":666},[70,1997,164],{"emptyLinePlaceholder":163},[70,1999,2000],{"class":72,"line":671},[70,2001,2002],{"class":156},"## Tone\n",[70,2004,2005],{"class":72,"line":677},[70,2006,164],{"emptyLinePlaceholder":163},[70,2008,2009],{"class":72,"line":682},[70,2010,2011],{"class":80},"Write plainly. No bold labels on bullets. No AI tells (\"seamlessly\", \"leverage\", \"robust\", \"ensures that\"). No hyphens or em dashes as sentence connectors.\n",[70,2013,2014],{"class":72,"line":688},[70,2015,164],{"emptyLinePlaceholder":163},[70,2017,2018],{"class":72,"line":693},[70,2019,2020],{"class":156},"## Rules\n",[70,2022,2023],{"class":72,"line":699},[70,2024,164],{"emptyLinePlaceholder":163},[70,2026,2027,2029],{"class":72,"line":704},[70,2028,77],{"class":76},[70,2030,2031],{"class":80}," No co-authors.\n",[70,2033,2034,2036],{"class":72,"line":710},[70,2035,77],{"class":76},[70,2037,2038],{"class":80}," No screenshots.\n",[70,2040,2041,2043],{"class":72,"line":715},[70,2042,77],{"class":76},[70,2044,2045],{"class":80}," Descriptive title required.\n",[11,2047,2048,2049,2052,2053],{},"Notice how the skill itself stays small. The real work lives in the pieces around it, which are much easier to maintain on their own: the ",[52,2050,2051],{},"script"," and the ",[52,2054,2055],{},"template.",[11,2057,2058,2059],{},"Here's the ",[52,2060,2061],{},"script:",[59,2063,2065],{"className":1292,"code":2064,"filename":1721,"language":1294,"meta":65,"style":65},"#!/usr/bin/env bash\n# Move the current local changes onto a fresh feature branch,\n# on top of the latest version of the target branch.\n# Usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>\nset -euo pipefail\n\nTARGET=\"${1:?usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>}\"\nBRANCH=\"${2:?usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>}\"\n\ngit stash push --include-untracked --message \"github-pr wip\" || true\ngit checkout \"$TARGET\"\ngit pull --ff-only\ngit checkout -b \"$BRANCH\"\ngit stash pop || true\n",[67,2066,2067,2071,2076,2081,2086,2094,2098,2139,2176,2180,2204,2218,2228,2244],{"__ignoreMap":65},[70,2068,2069],{"class":72,"line":73},[70,2070,1302],{"class":1301},[70,2072,2073],{"class":72,"line":160},[70,2074,2075],{"class":1301},"# Move the current local changes onto a fresh feature branch,\n",[70,2077,2078],{"class":72,"line":167},[70,2079,2080],{"class":1301},"# on top of the latest version of the target branch.\n",[70,2082,2083],{"class":72,"line":175},[70,2084,2085],{"class":1301},"# Usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>\n",[70,2087,2088,2090,2092],{"class":72,"line":183},[70,2089,1308],{"class":1307},[70,2091,1312],{"class":1311},[70,2093,1315],{"class":419},[70,2095,2096],{"class":72,"line":191},[70,2097,164],{"emptyLinePlaceholder":163},[70,2099,2100,2103,2105,2107,2109,2111,2113,2115,2118,2120,2122,2124,2127,2130,2133,2135,2137],{"class":72,"line":340},[70,2101,2102],{"class":80},"TARGET",[70,2104,1323],{"class":413},[70,2106,1326],{"class":419},[70,2108,1330],{"class":1329},[70,2110,1333],{"class":413},[70,2112,1336],{"class":80},[70,2114,1339],{"class":413},[70,2116,2117],{"class":80}," rebase",[70,2119,1130],{"class":419},[70,2121,1347],{"class":80},[70,2123,1350],{"class":419},[70,2125,2126],{"class":80},"target-branch",[70,2128,2129],{"class":419},"> \u003C",[70,2131,2132],{"class":80},"feature-branch",[70,2134,1356],{"class":419},[70,2136,1359],{"class":1329},[70,2138,1362],{"class":419},[70,2140,2141,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174],{"class":72,"line":352},[70,2142,2143],{"class":80},"BRANCH",[70,2145,1323],{"class":413},[70,2147,1326],{"class":419},[70,2149,1374],{"class":1329},[70,2151,1333],{"class":413},[70,2153,1336],{"class":80},[70,2155,1339],{"class":413},[70,2157,2117],{"class":80},[70,2159,1130],{"class":419},[70,2161,1347],{"class":80},[70,2163,1350],{"class":419},[70,2165,2126],{"class":80},[70,2167,2129],{"class":419},[70,2169,2132],{"class":80},[70,2171,1356],{"class":419},[70,2173,1359],{"class":1329},[70,2175,1362],{"class":419},[70,2177,2178],{"class":72,"line":364},[70,2179,164],{"emptyLinePlaceholder":163},[70,2181,2182,2184,2187,2189,2192,2195,2198,2201],{"class":72,"line":375},[70,2183,1914],{"class":76},[70,2185,2186],{"class":419}," stash",[70,2188,1917],{"class":419},[70,2190,2191],{"class":1311}," --include-untracked",[70,2193,2194],{"class":1311}," --message",[70,2196,2197],{"class":419}," \"github-pr wip\"",[70,2199,2200],{"class":413}," ||",[70,2202,2203],{"class":1307}," true\n",[70,2205,2206,2208,2211,2213,2216],{"class":72,"line":381},[70,2207,1914],{"class":76},[70,2209,2210],{"class":419}," checkout",[70,2212,1408],{"class":419},[70,2214,2215],{"class":80},"$TARGET",[70,2217,1362],{"class":419},[70,2219,2220,2222,2225],{"class":72,"line":474},[70,2221,1914],{"class":76},[70,2223,2224],{"class":419}," pull",[70,2226,2227],{"class":1311}," --ff-only\n",[70,2229,2230,2232,2234,2237,2239,2242],{"class":72,"line":480},[70,2231,1914],{"class":76},[70,2233,2210],{"class":419},[70,2235,2236],{"class":1311}," -b",[70,2238,1408],{"class":419},[70,2240,2241],{"class":80},"$BRANCH",[70,2243,1362],{"class":419},[70,2245,2246,2248,2250,2253,2255],{"class":72,"line":485},[70,2247,1914],{"class":76},[70,2249,2186],{"class":419},[70,2251,2252],{"class":419}," pop",[70,2254,2200],{"class":413},[70,2256,2203],{"class":1307},[11,2258,2259,2260,2263],{},"And here's the ",[52,2261,2262],{},"template"," all PR descriptions must follow:",[59,2265,2267],{"className":61,"code":2266,"filename":1715,"language":64,"meta":65,"style":65},"## What\n\n[One sentence: what this PR does.]\n\n## Changes\n\n- [One bullet per meaningful behavior change]\n\n## How to test\n\n1. [Step by step, so a reviewer can verify it]\n",[67,2268,2269,2274,2278,2283,2287,2292,2296,2303,2307,2312,2316],{"__ignoreMap":65},[70,2270,2271],{"class":72,"line":73},[70,2272,2273],{"class":156},"## What\n",[70,2275,2276],{"class":72,"line":160},[70,2277,164],{"emptyLinePlaceholder":163},[70,2279,2280],{"class":72,"line":167},[70,2281,2282],{"class":80},"[One sentence: what this PR does.]\n",[70,2284,2285],{"class":72,"line":175},[70,2286,164],{"emptyLinePlaceholder":163},[70,2288,2289],{"class":72,"line":183},[70,2290,2291],{"class":156},"## Changes\n",[70,2293,2294],{"class":72,"line":191},[70,2295,164],{"emptyLinePlaceholder":163},[70,2297,2298,2300],{"class":72,"line":340},[70,2299,77],{"class":76},[70,2301,2302],{"class":80}," [One bullet per meaningful behavior change]\n",[70,2304,2305],{"class":72,"line":352},[70,2306,164],{"emptyLinePlaceholder":163},[70,2308,2309],{"class":72,"line":364},[70,2310,2311],{"class":156},"## How to test\n",[70,2313,2314],{"class":72,"line":375},[70,2315,164],{"emptyLinePlaceholder":163},[70,2317,2318,2320],{"class":72,"line":381},[70,2319,845],{"class":76},[70,2321,2322],{"class":80}," [Step by step, so a reviewer can verify it]\n",[11,2324,2325,2326,2328],{},"Now I just type ",[67,2327,973],{}," once my code is ready for review. And boom! The PR gets created.",[11,2330,2331],{},"The skill rebases the work, reads the diff, fills in the template, and opens the PR using the description format I like. The skill knows how I like my branches named, how I want PRs written, and what I don't want in the final output. All those little preferences I used to retype, now baked into something the agent just follows.",[1654,2333],{},[38,2335,2337],{"id":2336},"in-closing","In Closing",[11,2339,2340],{},"Skills can really make your day (and your clanker's!) way easier. I've been trying to lean into skills more and more as I find parts of my workflow that can be automated.",[11,2342,2343],{},"The more I use them, the less they feel like time-saving shortcuts and the more they feel like teaching the agent how I work.",[11,2345,2346,2347,2352],{},"To learn more about skills, visit the ",[46,2348,2351],{"href":2349,"rel":2350},"https://agentskills.io",[116],"Agent Skills"," website.",[11,2354,44,2355,2358],{},[46,2356,2357],{"href":1031},"the next article",", we'll look at a more advanced way of working with skills: how to stack and chain them together to take our automation to the next level.",[11,2360,2361],{},"Until next time!",[1013,2363,2364],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .sYf5A, html code.shiki .sYf5A{--shiki-default:#66D9EF}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html pre.shiki code .sW0Xf, html code.shiki .sW0Xf{--shiki-default:#FD971F;--shiki-default-font-style:italic}html pre.shiki code .szGx7, html code.shiki .szGx7{--shiki-default:#FD971F}html pre.shiki code .ssRA_, html code.shiki .ssRA_{--shiki-default:#A6E22E;--shiki-default-font-weight:bold}",{"title":65,"searchDepth":160,"depth":160,"links":2366},[2367,2368,2373,2374],{"id":1093,"depth":160,"text":1094},{"id":1222,"depth":160,"text":1223,"children":2369},[2370,2371,2372],{"id":1234,"depth":167,"text":1235},{"id":1520,"depth":167,"text":1521},{"id":1594,"depth":167,"text":1595},{"id":1658,"depth":160,"text":1659},{"id":2336,"depth":160,"text":2337},"2026-07-08","If you keep giving your agent the same instructions over and over, write them down once as a skill and let it do the repetitive bits.","/img/blog/skills-i-know-kung-fu.png",{},{"title":1037,"description":2376},"blog/skills-i-know-kung-fu","ofnT_V552bv231JR8JZn6LX_1oEXMpEkTfGj3syw58U",{"id":2383,"title":2384,"body":2385,"category":1025,"date":2701,"description":2702,"draft":1028,"extension":64,"image":2703,"meta":2704,"navigation":163,"path":2705,"seo":2706,"stem":2707,"tighten":1028,"__hash__":2708},"blog/blog/did-webmasters-go-extinct.md","Did Webmasters Go Extinct?",{"type":8,"value":2386,"toc":2691},[2387,2398,2401,2406,2409,2414,2417,2420,2424,2431,2438,2441,2444,2447,2450,2456,2459,2463,2466,2471,2474,2477,2492,2499,2502,2505,2509,2512,2517,2520,2523,2526,2530,2533,2538,2541,2551,2554,2561,2599,2606,2609,2616,2620,2627,2632,2641,2644,2658,2665,2675,2678,2682,2685,2688],[11,2388,2389,2390,2393,2394,2397],{},"Imagine you meet a few developer friends after work. You grab a table at a bar, the first round arrives, and within about ninety seconds the conversation drifts to... ",[52,2391,2392],{},"AI."," It always does these days! AI is in every keynote, every group chat, every standup, and all over social media. It feels like the ",[256,2395,2396],{},"only thing"," any of us can talk about.",[11,2399,2400],{},"And for good reason. It has genuinely changed the way we work, and got all of us asking the same questions:",[15,2402,2403],{},[11,2404,2405],{},"What does this mean for me? How do I keep up? Should I lean into it, or hold out a little longer? Is it even safe? If I don't code anymore... what exactly do I do?",[11,2407,2408],{},"And sitting underneath all of those smaller questions, quietly, is the big one:",[15,2410,2411],{},[11,2412,2413],{},"Will AI take my job?",[11,2415,2416],{},"Heck, perhaps some of you have already been directly affected by AI in some capacity.",[11,2418,2419],{},"It's something that worries me just as much as it worries you, so let me share where I've landed and how I see it. But first, a little bit of nostalgia.",[38,2421,2423],{"id":2422},"i-was-a-webmaster","I Was a Webmaster",[11,2425,2426,2427,2430],{},"Decades ago, I was a ",[52,2428,2429],{},"webmaster."," Show of hands: how many of you even remember that word?",[11,2432,2433,2434,2437],{},"At the turn of the millennium, the webmaster was simply the person who made the website. Not just the frontend, or just the backend: ",[256,2435,2436],{},"the website."," One human being, start to finish. And that was possible because, back then, the web was a much smaller, much simpler creature.",[11,2439,2440],{},"Put something together in Photoshop, slice the design into images, conjure up HTML in Dreamweaver, and off you go! FTP those files to a shared hosting account and you're done.",[11,2442,2443],{},"I started toying around with websites when I got my first computer, in 2000. I still remember the first time I clicked that mysterious button in Internet Explorer 6. \"Edit in Microsoft FrontPage,\" the tooltip said. One click later, a clone of that page was sitting there, editable, right in front of me. And in another tab... the source code: HTML packed with tables and hacks.",[11,2445,2446],{},"Before I really understood what was happening, I was building sites for other people and getting paid for it. Not much, but who could ask for more? Building web stuff and getting paid, awesome!",[11,2448,2449],{},"The stack I worked with would be unrecognizable today. I fought to make my pages behave in Internet Explorer 6, 7, and 8. I built Flash intros and Flash sites (sorry, that was the trend). And when a project needed a little more muscle, I'd reach for WordPress and just enough PHP to make things dynamic and editable by the client.",[11,2451,2452,2453,2455],{},"All that made me a ",[52,2454,2429],{}," Clunky title, I know, but that was the word.",[11,2457,2458],{},"Now, do me a favor. Open a job board today and search for \"webmaster.\" Not a single posting, right? Sad. What happened?",[1232,2460,2462],{"id":2461},"the-day-webmasters-were-gone","The Day Webmasters Were Gone",[11,2464,2465],{},"At this point you're probably thinking:",[15,2467,2468],{},[11,2469,2470],{},"Sure, Nico, webmaster is a fossil of a word, and you, my friend, are old. Nobody calls a web developer a webmaster anymore.",[11,2472,2473],{},"And... you're right! That's exactly my point.",[11,2475,2476],{},"Did the webmasters go extinct? Did a meteor streak across the sky one Tuesday and wipe them and their Flash sites off the face of the Earth?",[11,2478,2479,2480,2483,2484,2487,2488,2491],{},"Of course not. ",[52,2481,2482],{},"We evolved."," Most of us are still around, just wearing different titles on our LinkedIn profiles. We changed because ",[256,2485,2486],{},"the web changed,"," and fast. All of a sudden, the simple HTML with its cute ",[67,2489,2490],{},"\u003Cmarquee>"," tags didn't cut it anymore, and there was no jQuery plugin to save us. Frameworks showed up and multiplied: Angular, then React, then Vue. JavaScript climbed out of the browser and onto the server with Node. And from there the toolbox just kept growing, from Webpack to Vite and from CoffeeScript to modern TypeScript. We can look back with nostalgia. The takeaway is obvious: things change.",[11,2493,2494,2495,2498],{},"And I had to learn every part of it as it arrived, whether I wanted to or not. I resented plenty of it at first. If in 2014 you were fast and happy with jQuery, Backbone, and Marionette, and someone parachuted you onto an Angular project, believe me, you felt the whiplash. \"Come on, why?\" But that resistance, that little wall of ",[256,2496,2497],{},"I don't want to learn a new thing right now",", is a wall you learn to climb over again and again, because the alternative is standing still while the industry walks off without you. That's just the nature of the game.",[11,2500,2501],{},"Webmasters mutated into many roles: backend developer, frontend developer, DevOps, QA. Of course, some closed the laptop and went off to open a beach bar. But a huge number of us simply adapted, and I'm one of them. I'm a full-stack developer today, I was a webmaster yesterday. I've been doing this for more than fifteen years. Twenty-six, really, if you count back to that fifteen-year-old kid poking around in FrontPage in 2000.",[11,2503,2504],{},"And it will keep going. The tools will keep shifting under our feet, because that is the one constant of this whole industry. Technology evolves, and we evolve with it, or we don't get to keep playing.",[38,2506,2508],{"id":2507},"which-brings-us-back-to-ai","Which Brings Us Back to AI",[11,2510,2511],{},"Here's the thing I most want you to carry away from this article, the single sentence I'd tattoo across this whole conversation if I could:",[11,2513,2514],{},[52,2515,2516],{},"AI is here to shake up the market and rewrite how we work, but it will not take your place if you evolve.",[11,2518,2519],{},"That's the entire message. Evolve, and you stay in the game.",[11,2521,2522],{},"Yes, the name of your role will most likely change. Will you become an \"AI Coding Agent Wrangler\" or a \"Vibe Engineer\"? I wouldn't mind a business card that says \"Clanker Babysitter.\" We've all seen the crazy titles and silly job descriptions floating around. Take them with a grain of salt.",[11,2524,2525],{},"Because at the end of the day, what matters is what you actually bring to the table when it comes to solving a problem. And that was never just typing code.",[1232,2527,2529],{"id":2528},"you-were-never-just-a-coder","You Were Never Just a Coder",[11,2531,2532],{},"Tell me if you've heard, or even felt, this:",[15,2534,2535],{},[11,2536,2537],{},"AI is robbing me of the joy of coding.",[11,2539,2540],{},"I hear you. I kind of feel the same.",[11,2542,2543,2544,974,2547,2550],{},"I love writing code by hand, fussing over the shape of a function, crafting good-looking methods. Hey, I even enjoyed the ",[256,2545,2546],{},"tabs vs. spaces",[256,2548,2549],{},"semicolons vs. no semicolons"," wars!",[11,2552,2553],{},"For me, coding was never a chore. It's the fun part, a little puzzle I'm genuinely happy to sit inside for an afternoon. And now here comes this new reality where you open your terminal, paste in a spec, and watch an agent spit out in thirty seconds the code you would've lovingly typed out over the next hour. If that stings a little, if it feels like something you enjoyed is being taken away, you're not wrong and you're not alone. Some mornings it gets me too.",[11,2555,2556,2557,2560],{},"But your job, your real job as an engineer and a problem-solver, ",[52,2558,2559],{},"was never just the act of typing characters into a file."," Coding was a part of it, often the most enjoyable part, but never the whole of it. Zoom out and the actual work has always looked more like this:",[123,2562,2563,2569,2575,2581,2587,2593],{},[126,2564,2565,2568],{},[52,2566,2567],{},"Research:"," Figuring out what's possible and what others have already solved.",[126,2570,2571,2574],{},[52,2572,2573],{},"Planning and specs:"," Deciding what problem we're truly here to fix, and for whom.",[126,2576,2577,2580],{},[52,2578,2579],{},"Coding:"," Turning all of that thinking into real, running source code. The fun part, I'll happily admit.",[126,2582,2583,2586],{},[52,2584,2585],{},"Code review:"," Reading your teammates' pull requests, following the open PRs on an open source project, and judging what's ready to ship.",[126,2588,2589,2592],{},[52,2590,2591],{},"Testing:"," Writing an automated test suite, or clicking through the app by hand until you trust it.",[126,2594,2595,2598],{},[52,2596,2597],{},"Documentation:"," The one we all mumble past (\"yeah... the docs are pending, but the API works\").",[11,2600,2601,2602,2605],{},"We did all six, but we poured most of our hours into that third bullet and sprinted through the rest. And ",[256,2603,2604],{},"that ratio"," is precisely what AI is rearranging.",[11,2607,2608],{},"This isn't the end of writing code. We'll still write plenty. But if before you spent, say, 70% of the week producing code and 30% on everything around it, the new you may find that balance flipping on its head. Less time typing code, more time reading and reviewing the code an agent produced while you were busy elsewhere.",[11,2610,2611,2612,2615],{},"And ",[52,2613,2614],{},"reviewing"," is the step where I watch a lot of people quietly fumble the whole thing.",[38,2617,2619],{"id":2618},"a-recipe-for-disaster","A Recipe for Disaster",[11,2621,2622,2623,2626],{},"Some developers have started letting the agent write the code and then merging it without ever really reading it. That's the ",[256,2624,2625],{},"vibe coding"," mantra, right?",[15,2628,2629],{},[11,2630,2631],{},"There's a new kind of coding I call \"vibe coding,\" where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. (Andrej Karpathy, Feb. 2025)",[11,2633,2634,2635,2640],{},"In that ",[46,2636,2639],{"href":2637,"rel":2638},"https://x.com/karpathy/status/1886192184808149383?lang=en",[116],"famous tweet,"," Karpathy says vibe coding isn't too bad for throwaway weekend projects. Fast forward to today, and you have companies shipping vibe-coded PRs into production like there's no tomorrow.",[11,2642,2643],{},"That's a mistake, and a costly one.",[11,2645,2646,2647,2650,2651,2654,2655],{},"Think about what you're actually doing when you build software. You're solving a ",[256,2648,2649],{},"real problem"," for ",[256,2652,2653],{},"real people",". So when something breaks at the worst possible moment, the agent is not the one who gets the phone call. The agent doesn't lose sleep, doesn't answer to the client, and doesn't carry the responsibility. ",[52,2656,2657],{},"You do.",[11,2659,2660,2661,2664],{},"When your customer loads the page and gets a big, ugly 500 error, \"Sorry, perhaps Claude merged a PR with a bug\" is not a sentence that will save you. You're still the one who has to take responsibility, fix the problem, and explain what went wrong. By all means, use AI to help you fix it, but understand that the accountability ",[256,2662,2663],{},"never left your desk"," and never will.",[11,2666,2667,2670,2671,2674],{},[52,2668,2669],{},"So don't skip the review."," Read what the agent produced with the same care you'd give a coworker's pull request, the same care you brought the first time you inherited a stranger's codebase and had to understand it before you dared touch it. ",[52,2672,2673],{},"You already own this skill."," Nothing new is being asked of you here except a shift in where your hours go: a little less typing into a blank file, a lot more reading with a critical eye.",[11,2676,2677],{},"That shift is the whole point, and leaning into it is what turns AI from a rival into an ally. Meet it there, and it stops being the thing coming for your job and becomes the thing that helps you get to the finish line faster.",[38,2679,2681],{"id":2680},"so-whats-next","So What's Next?",[11,2683,2684],{},"It doesn't matter whether you're the nervous friend at the bar who suspects AI is coming for everything, or the one who's already automated half of their week away. The move in front of you is the same one webmasters had to make twenty years ago: pick up the new tools, figure out how to make them work for you, and evolve.",[11,2686,2687],{},"Because no, AI is not going to take your job. But refusing to learn it just might leave you a step slower than the developer sitting at the next desk, someone no more talented than you who simply embraced the power-up.",[11,2689,2690],{},"Now, I have to go. A client asked for a Flash intro. Until next time!",{"title":65,"searchDepth":160,"depth":160,"links":2692},[2693,2696,2699,2700],{"id":2422,"depth":160,"text":2423,"children":2694},[2695],{"id":2461,"depth":167,"text":2462},{"id":2507,"depth":160,"text":2508,"children":2697},[2698],{"id":2528,"depth":167,"text":2529},{"id":2618,"depth":160,"text":2619},{"id":2680,"depth":160,"text":2681},"2026-07-07","AI is everywhere, and so is the question hiding underneath it: will it take my job? Here's what I think.","/img/blog/did-webmasters-go-extinct.png",{},"/blog/did-webmasters-go-extinct",{"title":2384,"description":2702},"blog/did-webmasters-go-extinct","sKC942B_BTVAhBdTwcq-7KTPg7BtCorMrbyYol5NCLg",{"id":2710,"title":2711,"body":2712,"category":5949,"date":5950,"description":5951,"draft":1028,"extension":64,"image":5952,"meta":5953,"navigation":163,"path":5954,"seo":5955,"stem":5956,"tighten":1028,"__hash__":5957},"blog/blog/building-a-platformer-game-with-vue-and-pixijs.md","Building a Platformer Game with Vue and PixiJS",{"type":8,"value":2713,"toc":5932},[2714,2717,2728,2735,2749,2752,2755,2763,2767,2770,2777,2780,2786,2797,2801,2807,2866,2874,2880,2887,2892,2910,2913,2917,2920,2927,2930,2937,2948,2958,3093,3112,3115,3121,3127,3132,3135,3141,3145,3148,3155,3161,3171,3178,3181,3191,3194,3198,3203,3214,3225,3337,3346,3359,3368,3372,3381,3388,3554,3560,3761,3783,3786,3808,3817,3820,3824,3835,3840,3843,3847,3862,3877,3888,3968,3990,3997,4001,4008,4011,4042,4045,4163,4166,4174,4177,4180,4189,4203,4208,4218,4222,4233,4236,4431,4437,4602,4605,4612,4615,4701,4714,4721,4772,4782,4786,4789,4795,4802,4828,4839,5013,5033,5038,5045,5337,5343,5347,5350,5357,5567,5578,5581,5613,5616,5752,5769,5776,5795,5805,5815,5818,5822,5825,5895,5907,5909,5919,5927,5929],[11,2715,2716],{},"Like many of you, I spend my days building web apps: forms, dashboards, a couple of animations here and there.",[11,2718,2719,2720,2723,2724,2727],{},"Then, a few days ago, I watched a YouTube video of someone building a ",[52,2721,2722],{},"browser game",": a tiny platformer. You control a blue box, jumping over boxes and avoiding cannon shots. A few minutes into the tutorial, I realized: ",[256,2725,2726],{},"I have no idea how this works."," Loops, physics, collision math... it all sounded familiar, but very different from the reactive world I'm used to.",[11,2729,2730,2731,2734],{},"And a question popped up in my head: ",[52,2732,2733],{},"can I build a platformer game using Vue?"," Can my Vue skills help me in my game dev journey? Luckily, the answer to both questions is yes.",[11,2736,2737,2738,974,2741,2744,2745,2748],{},"I built a platformer game with ",[52,2739,2740],{},"Vue 3",[52,2742,2743],{},"PixiJS",", and almost every piece of it mapped to something you already do in Vue: a game loop is a watcher, game state is a ",[67,2746,2747],{},"ref",", the scene is a component tree, and so on.",[11,2750,2751],{},"So join me to discover how to do it! We'll walk through the seven ideas that make up every 2D game, each one paired with its Vue equivalent, with live demos you can poke at as we go.",[11,2753,2754],{},"Click this iframe to play: use the arrow keys to move and the spacebar to jump.",[2756,2757],"iframe",{"src":2758,"title":2759,"loading":2760,"scrolling":2761,"style":2762},"https://demo-vue-platformer.netlify.app/","A little platformer","lazy","no","width:100%;aspect-ratio:960/640;border:0;border-radius:16px;margin:1.5rem 0;display:block",[38,2764,2766],{"id":2765},"the-game-loop","The Game Loop",[11,2768,2769],{},"A single-page application re-renders only when the state changes. You want to minimize the number of times you repaint elements in the DOM. That's why we use the virtual DOM and other techniques to keep patching to a minimum. Touching the DOM is expensive, so we do it as little as possible.",[11,2771,2772,2773,2776],{},"In a game, that's totally different. Most likely you won't be dealing with DOM elements, but with a single ",[67,2774,2775],{},"\u003Ccanvas>",". The whole game takes place inside that canvas. The rendering model is completely different: the scene gets repainted continuously. At 60 frames per second, the canvas is redrawn 60 times every second. Each frame is a fresh snapshot, and when those snapshots come quickly enough, our eyes perceive motion.",[11,2778,2779],{},"But wait, isn't that... a lot? Recomputing everything, all the time, and repainting the whole scene many times per second? Well, yeah, that can sound like overkill in our DOM world, since we're used to waiting for specific events (a keystroke, a network response) and only re-rendering what we need.",[11,2781,2782,2783,2785],{},"But inside the ",[67,2784,2775],{},", things are different. It doesn't have a tree of expensive-to-patch elements. Instead, it's just a blank canvas that we can paint, clear, and repaint very quickly. This can still sound like a lot for a slow, turn-based game with only a few elements on screen. But once you introduce physics, collisions, or dozens of moving bullets, it makes sense to calculate where everything should be and paint it onto the canvas every frame.",[11,2787,2788,2789,2792,2793,2796],{},"And that's the game loop! The mindset shift is from ",[256,2790,2791],{},"event-driven"," to ",[256,2794,2795],{},"loop-driven",". Once that clicks, you're ready for game development.",[38,2798,2800],{"id":2799},"games-in-plain-javascript","Games in Plain JavaScript",[11,2802,2803,2804,1339],{},"In the browser, that loop is ",[67,2805,2806],{},"requestAnimationFrame",[59,2808,2812],{"className":2809,"code":2810,"language":2811,"meta":65,"style":65},"language-js shiki shiki-themes monokai","function loop() {\n  update()\n  render()\n\n  requestAnimationFrame(loop)\n}\n\nrequestAnimationFrame(loop)\n","js",[67,2813,2814,2825,2833,2840,2844,2852,2856,2860],{"__ignoreMap":65},[70,2815,2816,2819,2822],{"class":72,"line":73},[70,2817,2818],{"class":283},"function",[70,2820,2821],{"class":76}," loop",[70,2823,2824],{"class":80},"() {\n",[70,2826,2827,2830],{"class":72,"line":160},[70,2828,2829],{"class":76},"  update",[70,2831,2832],{"class":80},"()\n",[70,2834,2835,2838],{"class":72,"line":167},[70,2836,2837],{"class":76},"  render",[70,2839,2832],{"class":80},[70,2841,2842],{"class":72,"line":175},[70,2843,164],{"emptyLinePlaceholder":163},[70,2845,2846,2849],{"class":72,"line":183},[70,2847,2848],{"class":76},"  requestAnimationFrame",[70,2850,2851],{"class":80},"(loop)\n",[70,2853,2854],{"class":72,"line":191},[70,2855,384],{"class":80},[70,2857,2858],{"class":72,"line":340},[70,2859,164],{"emptyLinePlaceholder":163},[70,2861,2862,2864],{"class":72,"line":352},[70,2863,2806],{"class":76},[70,2865,2851],{"class":80},[11,2867,2868,2870,2871],{},[67,2869,2806],{}," is a browser API specifically designed for animations. Instead of asking JavaScript to run your code as fast as possible, you're asking the browser: ",[256,2872,2873],{},"\"Call this function right before you paint the next frame.\"",[11,2875,2876,2877,2879],{},"This is an important distinction. Browsers already have their own rendering pipeline. Roughly 60 times per second (or more on high-refresh-rate displays), they calculate layouts, paint pixels, and display a new frame on the screen. ",[67,2878,2806],{}," lets your code hook directly into that process, so your updates happen at exactly the right moment.",[11,2881,2882,2883,2886],{},"You could imagine replacing it with a ",[67,2884,2885],{},"setInterval"," running every 16 milliseconds, but that has a few problems. Timers aren't synchronized with the browser's rendering cycle, so they can fire too early, too late, or even while the browser is still busy painting the previous frame. That can lead to choppy animations and unnecessary work.",[11,2888,2889,2891],{},[67,2890,2806],{}," is also smarter than a timer. If the tab is hidden or minimized, the browser will automatically pause or greatly reduce how often your callback runs, saving CPU and battery life.",[11,2893,2894,2895,2897,2898,2901,2902,2905,2906,2909],{},"One thing to notice is that ",[67,2896,2806],{}," only schedules ",[52,2899,2900],{},"one"," callback. It doesn't automatically repeat. That's why the last line inside our ",[67,2903,2904],{},"loop()"," function is another call to ",[67,2907,2908],{},"requestAnimationFrame(loop)",". Each frame schedules the next one, creating an endless cycle that continues until we stop requesting new frames.",[11,2911,2912],{},"That's the foundation of nearly every browser game. Every frame, the browser says, \"It's time to draw again,\" your game updates its world, renders the result, and asks to be called back for the next frame.",[38,2914,2916],{"id":2915},"time-vs-frames","Time vs. Frames",[11,2918,2919],{},"There's one subtle problem, though.",[11,2921,2922,2923,2926],{},"We just said the browser calls our loop before every frame. But what exactly is ",[256,2924,2925],{},"a frame","?",[11,2928,2929],{},"If every screen refreshed exactly 60 times per second, life would be easy. We could move the player 5 pixels every frame and know they'd travel 300 pixels every second. But... the real world is messier.",[11,2931,2932,2933,2936],{},"Some players have 144Hz monitors. Others are on older laptops that can barely manage 30 FPS. Sometimes the browser gets busy for a moment and skips a frame. If we move everything by a fixed amount ",[52,2934,2935],{},"per frame",", then the game's speed becomes tied to the machine running it. Faster computers make the game run faster, slower ones make it run in slow motion.",[11,2938,2939,2940,2943,2944,2947],{},"What we really care about isn't ",[52,2941,2942],{},"how many frames"," have passed. We care about ",[52,2945,2946],{},"how much time"," has passed.",[11,2949,2950,2951,2954,2955,2957],{},"And that's where ",[52,2952,2953],{},"delta time"," comes in. Delta time is simply the amount of time that elapsed since the previous frame. Luckily, ",[67,2956,2806],{}," already gives us the current timestamp every time it calls our callback. By comparing it to the previous timestamp, we can calculate exactly how much time has passed:",[59,2959,2961],{"className":2809,"code":2960,"language":2811,"meta":65,"style":65},"let previousTime = 0\n\nfunction loop(currentTime) {\n  const elapsed = currentTime - previousTime\n  const deltaTime = elapsed / (1000 / 60)\n  previousTime = currentTime\n\n  update(deltaTime)\n  render()\n\n  requestAnimationFrame(loop)\n}\n\nrequestAnimationFrame(loop)\n",[67,2962,2963,2976,2980,2995,3013,3042,3052,3056,3063,3069,3073,3079,3083,3087],{"__ignoreMap":65},[70,2964,2965,2968,2971,2973],{"class":72,"line":73},[70,2966,2967],{"class":283},"let",[70,2969,2970],{"class":80}," previousTime ",[70,2972,1323],{"class":413},[70,2974,2975],{"class":1311}," 0\n",[70,2977,2978],{"class":72,"line":160},[70,2979,164],{"emptyLinePlaceholder":163},[70,2981,2982,2984,2986,2989,2992],{"class":72,"line":167},[70,2983,2818],{"class":283},[70,2985,2821],{"class":76},[70,2987,2988],{"class":80},"(",[70,2990,2991],{"class":1329},"currentTime",[70,2993,2994],{"class":80},") {\n",[70,2996,2997,3000,3003,3005,3008,3010],{"class":72,"line":175},[70,2998,2999],{"class":283},"  const",[70,3001,3002],{"class":80}," elapsed ",[70,3004,1323],{"class":413},[70,3006,3007],{"class":80}," currentTime ",[70,3009,77],{"class":413},[70,3011,3012],{"class":80}," previousTime\n",[70,3014,3015,3017,3020,3022,3024,3027,3030,3033,3036,3039],{"class":72,"line":183},[70,3016,2999],{"class":283},[70,3018,3019],{"class":80}," deltaTime ",[70,3021,1323],{"class":413},[70,3023,3002],{"class":80},[70,3025,3026],{"class":413},"/",[70,3028,3029],{"class":80}," (",[70,3031,3032],{"class":1311},"1000",[70,3034,3035],{"class":413}," /",[70,3037,3038],{"class":1311}," 60",[70,3040,3041],{"class":80},")\n",[70,3043,3044,3047,3049],{"class":72,"line":191},[70,3045,3046],{"class":80},"  previousTime ",[70,3048,1323],{"class":413},[70,3050,3051],{"class":80}," currentTime\n",[70,3053,3054],{"class":72,"line":340},[70,3055,164],{"emptyLinePlaceholder":163},[70,3057,3058,3060],{"class":72,"line":352},[70,3059,2829],{"class":76},[70,3061,3062],{"class":80},"(deltaTime)\n",[70,3064,3065,3067],{"class":72,"line":364},[70,3066,2837],{"class":76},[70,3068,2832],{"class":80},[70,3070,3071],{"class":72,"line":375},[70,3072,164],{"emptyLinePlaceholder":163},[70,3074,3075,3077],{"class":72,"line":381},[70,3076,2848],{"class":76},[70,3078,2851],{"class":80},[70,3080,3081],{"class":72,"line":474},[70,3082,384],{"class":80},[70,3084,3085],{"class":72,"line":480},[70,3086,164],{"emptyLinePlaceholder":163},[70,3088,3089,3091],{"class":72,"line":485},[70,3090,2806],{"class":76},[70,3092,2851],{"class":80},[11,3094,3095,3096,3099,3100,3103,3104,3107,3108,3111],{},"Here I'm also normalizing the value to a 60 FPS baseline. That means ",[67,3097,3098],{},"deltaTime"," is ",[67,3101,3102],{},"1.0"," at 60 FPS, ",[67,3105,3106],{},"2.0"," at 30 FPS, and ",[67,3109,3110],{},"0.5"," at 120 FPS.",[11,3113,3114],{},"Instead of saying, \"move 5 pixels every frame,\" we say, \"move 5 pixels, scaled by how long this frame took.\"",[11,3116,3117,3118,3120],{},"Multiply your movement by ",[67,3119,3098],{},", and suddenly your game behaves the same everywhere. The player covers the same distance per second whether the browser renders 30 frames or 144. Motion is based on real time, not frame count.",[11,3122,3123,3124,3126],{},"The demo below is a bare ",[67,3125,2806],{}," loop, running as you read this. Nothing is animating the count; the loop just keeps coming around.",[2756,3128],{"src":3129,"title":3130,"loading":2760,"scrolling":2761,"style":3131},"/demos/building-a-platformer-game-with-vue-and-pixijs/game-loop.html","A bare game loop counting frames","width:100%;height:200px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,3133,3134],{},"That counter is the whole engine underneath. The loop comes back around roughly 60 times a second whether your state changed or not. Every time it does, your game gets another opportunity to update the world, draw a new frame, and ask the browser to call it again.",[11,3136,3137,3138],{},"That's the fundamental shift from web development to game development. Instead of waiting for something to happen and reacting to it, you're continuously simulating the world. The loop never stops. It just keeps asking, ",[256,3139,3140],{},"\"What should the next frame look like?\"",[38,3142,3144],{"id":3143},"pixi-for-games-and-more","Pixi, for Games and More",[11,3146,3147],{},"So far, we've only been incrementing a counter. Drawing a game is a very different challenge.",[11,3149,3150,3151,3154],{},"Sure, you ",[256,3152,3153],{},"could"," use the Canvas 2D API directly, or even WebGL if you're feeling adventurous. But it doesn't take long before you're worrying about batching draw calls, managing textures, applying transforms, and solving a dozen rendering problems that have nothing to do with the game you actually want to build.",[11,3156,3157,3158,3160],{},"That's the layer ",[52,3159,2743],{}," takes care of.",[11,3162,3163,3164,3166,3167,3170],{},"PixiJS is a high-performance 2D rendering engine. It renders everything into an HTML ",[67,3165,2775],{},", using WebGL under the hood whenever possible, while exposing a friendly scene graph made up of sprites, containers, text, graphics, and other display objects. You tell Pixi ",[256,3168,3169],{},"what"," to draw; it figures out the fastest way to draw it.",[11,3172,3173,3174,3177],{},"Notice what Pixi ",[52,3175,3176],{},"doesn't"," do: It doesn't know what gravity is, it doesn't know how your enemies move, or whether your player won the game. That's our job. In other words, we have the control.",[11,3179,3180],{},"Pixi's responsibility is rendering, and it does that extremely well. That's why you'll find it powering not just games, but also interactive websites, visualizations, educational tools, and data-heavy interfaces.",[11,3182,3183,3184,3187,3188,3190],{},"It also provides its own ",[52,3185,3186],{},"ticker",", which is essentially a wrapper around ",[67,3189,2806],{},". Instead of writing and managing the game loop ourselves, we just register a callback and Pixi calls it every frame.",[11,3192,3193],{},"And once Vue enters the picture, we barely even write that.",[38,3195,3197],{"id":3196},"vue-custom-renderer-for-pixi","Vue Custom Renderer for Pixi",[11,3199,3200,3201,1130],{},"Here's something you might not know: Vue is not limited to the DOM. Of course, rendering websites and web applications is by far its most common use case, but Vue's renderer is completely independent from its reactivity system. That means we can define our own custom renderer and use the power of Vue reactivity to render to entirely different environments, like a terminal or (you guessed it) inside a ",[67,3202,2775],{},[11,3204,3205,3206,3213],{},"That's where ",[46,3207,3210],{"href":3208,"rel":3209},"https://vue3-pixi.vercel.app/",[116],[67,3211,3212],{},"vue3-pixi"," comes in. It's a custom Vue renderer for PixiJS. Instead of mixing Vue with imperative Pixi code, we can build the entire game using components, props, emits, and reactivity: the same tools we already use every day.",[11,3215,3216,3217,3220,3221,3224],{},"It also exposes the Pixi ticker as a composable called ",[67,3218,3219],{},"onTick",". You can think of it as a ",[67,3222,3223],{},"watchEffect"," that doesn't wait for dependencies: it simply runs every frame.",[59,3226,3230],{"className":3227,"code":3228,"language":3229,"meta":65,"style":65},"language-ts shiki shiki-themes monokai","import { ref } from 'vue'\nimport { onTick } from 'vue3-pixi'\n\nconst x = ref(0)\nconst speed = 2\n\nonTick(({ deltaTime }) => {\n  x.value += speed * deltaTime\n})\n","ts",[67,3231,3232,3246,3258,3262,3282,3294,3298,3316,3332],{"__ignoreMap":65},[70,3233,3234,3237,3240,3243],{"class":72,"line":73},[70,3235,3236],{"class":413},"import",[70,3238,3239],{"class":80}," { ref } ",[70,3241,3242],{"class":413},"from",[70,3244,3245],{"class":419}," 'vue'\n",[70,3247,3248,3250,3253,3255],{"class":72,"line":160},[70,3249,3236],{"class":413},[70,3251,3252],{"class":80}," { onTick } ",[70,3254,3242],{"class":413},[70,3256,3257],{"class":419}," 'vue3-pixi'\n",[70,3259,3260],{"class":72,"line":167},[70,3261,164],{"emptyLinePlaceholder":163},[70,3263,3264,3267,3270,3272,3275,3277,3280],{"class":72,"line":175},[70,3265,3266],{"class":283},"const",[70,3268,3269],{"class":80}," x ",[70,3271,1323],{"class":413},[70,3273,3274],{"class":76}," ref",[70,3276,2988],{"class":80},[70,3278,3279],{"class":1311},"0",[70,3281,3041],{"class":80},[70,3283,3284,3286,3289,3291],{"class":72,"line":183},[70,3285,3266],{"class":283},[70,3287,3288],{"class":80}," speed ",[70,3290,1323],{"class":413},[70,3292,3293],{"class":1311}," 2\n",[70,3295,3296],{"class":72,"line":191},[70,3297,164],{"emptyLinePlaceholder":163},[70,3299,3300,3302,3305,3307,3310,3313],{"class":72,"line":340},[70,3301,3219],{"class":76},[70,3303,3304],{"class":80},"(({ ",[70,3306,3098],{"class":1329},[70,3308,3309],{"class":80}," }) ",[70,3311,3312],{"class":283},"=>",[70,3314,3315],{"class":80}," {\n",[70,3317,3318,3321,3324,3326,3329],{"class":72,"line":352},[70,3319,3320],{"class":80},"  x.value ",[70,3322,3323],{"class":413},"+=",[70,3325,3288],{"class":80},[70,3327,3328],{"class":413},"*",[70,3330,3331],{"class":80}," deltaTime\n",[70,3333,3334],{"class":72,"line":364},[70,3335,3336],{"class":80},"})\n",[11,3338,3339,3340,3342,3343,3345],{},"Notice how ",[67,3341,3098],{}," is simply handed to us now. The ticker has already measured the time between frames, so all the timestamp bookkeeping from our vanilla ",[67,3344,2806],{}," loop disappears. For now, just think of speed as a constant movement rate. We'll make this more realistic when we get to physics.",[11,3347,3348,3349,3351,3352,3354,3355,3358],{},"In the real game we'd also cap ",[67,3350,3098],{},". If the browser pauses the loop (for example, because you switch tabs), the next frame arrives with a huge ",[67,3353,3098],{},". Without a limit, ",[67,3356,3357],{},"x += speed * deltaTime"," would make the player leap across the level in a single update.",[11,3360,3361,3362,954,3365,3367],{},"One important detail: the whole game runs on a ",[52,3363,3364],{},"single",[67,3366,3219],{},". Every snippet below is just a slice of that one callback, executed in order. There's no second loop applying gravity twice.",[38,3369,3371],{"id":3370},"smells-like-vue-spirit","Smells Like Vue Spirit",[11,3373,3374,3375,3377,3378],{},"With ",[67,3376,3212],{},", game code starts looking... ",[52,3379,3380],{},"like Vue.",[11,3382,3383,3384,3387],{},"The root is an ",[67,3385,3386],{},"\u003CApplication>",", which creates the canvas and starts the ticker for you.",[59,3389,3393],{"className":3390,"code":3391,"language":3392,"meta":65,"style":65},"language-vue shiki shiki-themes monokai","\u003Cscript setup lang=\"ts\">\nimport { Application } from 'vue3-pixi'\nimport { WORLD } from './game/level'\nimport World from './components/World.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CApplication\n    :width=\"WORLD.w\"\n    :height=\"WORLD.h\"\n    :background=\"0xbfe9f7\"\n    :antialias=\"true\"\n  >\n    \u003CWorld />\n  \u003C/Application>\n\u003C/template>\n","vue",[67,3394,3395,3416,3427,3439,3451,3460,3464,3472,3480,3490,3500,3510,3520,3525,3536,3546],{"__ignoreMap":65},[70,3396,3397,3400,3402,3405,3408,3410,3413],{"class":72,"line":73},[70,3398,3399],{"class":80},"\u003C",[70,3401,2051],{"class":413},[70,3403,3404],{"class":76}," setup",[70,3406,3407],{"class":76}," lang",[70,3409,1323],{"class":80},[70,3411,3412],{"class":419},"\"ts\"",[70,3414,3415],{"class":80},">\n",[70,3417,3418,3420,3423,3425],{"class":72,"line":160},[70,3419,3236],{"class":413},[70,3421,3422],{"class":80}," { Application } ",[70,3424,3242],{"class":413},[70,3426,3257],{"class":419},[70,3428,3429,3431,3434,3436],{"class":72,"line":167},[70,3430,3236],{"class":413},[70,3432,3433],{"class":80}," { WORLD } ",[70,3435,3242],{"class":413},[70,3437,3438],{"class":419}," './game/level'\n",[70,3440,3441,3443,3446,3448],{"class":72,"line":175},[70,3442,3236],{"class":413},[70,3444,3445],{"class":80}," World ",[70,3447,3242],{"class":413},[70,3449,3450],{"class":419}," './components/World.vue'\n",[70,3452,3453,3456,3458],{"class":72,"line":183},[70,3454,3455],{"class":80},"\u003C/",[70,3457,2051],{"class":413},[70,3459,3415],{"class":80},[70,3461,3462],{"class":72,"line":191},[70,3463,164],{"emptyLinePlaceholder":163},[70,3465,3466,3468,3470],{"class":72,"line":340},[70,3467,3399],{"class":80},[70,3469,2262],{"class":413},[70,3471,3415],{"class":80},[70,3473,3474,3477],{"class":72,"line":352},[70,3475,3476],{"class":80},"  \u003C",[70,3478,3479],{"class":413},"Application\n",[70,3481,3482,3485,3487],{"class":72,"line":364},[70,3483,3484],{"class":76},"    :width",[70,3486,1323],{"class":80},[70,3488,3489],{"class":419},"\"WORLD.w\"\n",[70,3491,3492,3495,3497],{"class":72,"line":375},[70,3493,3494],{"class":76},"    :height",[70,3496,1323],{"class":80},[70,3498,3499],{"class":419},"\"WORLD.h\"\n",[70,3501,3502,3505,3507],{"class":72,"line":381},[70,3503,3504],{"class":76},"    :background",[70,3506,1323],{"class":80},[70,3508,3509],{"class":419},"\"0xbfe9f7\"\n",[70,3511,3512,3515,3517],{"class":72,"line":474},[70,3513,3514],{"class":76},"    :antialias",[70,3516,1323],{"class":80},[70,3518,3519],{"class":419},"\"true\"\n",[70,3521,3522],{"class":72,"line":480},[70,3523,3524],{"class":80},"  >\n",[70,3526,3527,3530,3533],{"class":72,"line":485},[70,3528,3529],{"class":80},"    \u003C",[70,3531,3532],{"class":413},"World",[70,3534,3535],{"class":80}," />\n",[70,3537,3538,3541,3544],{"class":72,"line":496},[70,3539,3540],{"class":80},"  \u003C/",[70,3542,3543],{"class":413},"Application",[70,3545,3415],{"class":80},[70,3547,3548,3550,3552],{"class":72,"line":507},[70,3549,3455],{"class":80},[70,3551,2262],{"class":413},[70,3553,3415],{"class":80},[11,3555,3556,3559],{},[67,3557,3558],{},"\u003CWorld>"," is just another Vue component. Its template describes the current stage:",[59,3561,3563],{"className":3390,"code":3562,"language":3392,"meta":65,"style":65},"\u003Ctemplate>\n  \u003Ccontainer>\n    \u003CBackground />\n\n    \u003CPlatform\n      v-for=\"(p, i) in PLATFORMS\"\n      :key=\"`p${i}`\"\n      :rect=\"p\"\n    />\n    \u003CSaw v-for=\"(s, i) in SAWS\" :key=\"`s${i}`\" :pos=\"s\" />\n    \u003CGoal />\n\n    \u003CPlayer :active=\"active\" @hit=\"onHit\" @win=\"onWin\" />\n\n    \u003CHud :lives=\"lives\" :won=\"won\" />\n  \u003C/container>\n\u003C/template>\n",[67,3564,3565,3573,3582,3591,3595,3602,3612,3622,3632,3637,3670,3679,3683,3716,3720,3745,3753],{"__ignoreMap":65},[70,3566,3567,3569,3571],{"class":72,"line":73},[70,3568,3399],{"class":80},[70,3570,2262],{"class":413},[70,3572,3415],{"class":80},[70,3574,3575,3577,3580],{"class":72,"line":160},[70,3576,3476],{"class":80},[70,3578,3579],{"class":413},"container",[70,3581,3415],{"class":80},[70,3583,3584,3586,3589],{"class":72,"line":167},[70,3585,3529],{"class":80},[70,3587,3588],{"class":413},"Background",[70,3590,3535],{"class":80},[70,3592,3593],{"class":72,"line":175},[70,3594,164],{"emptyLinePlaceholder":163},[70,3596,3597,3599],{"class":72,"line":183},[70,3598,3529],{"class":80},[70,3600,3601],{"class":413},"Platform\n",[70,3603,3604,3607,3609],{"class":72,"line":191},[70,3605,3606],{"class":76},"      v-for",[70,3608,1323],{"class":80},[70,3610,3611],{"class":419},"\"(p, i) in PLATFORMS\"\n",[70,3613,3614,3617,3619],{"class":72,"line":340},[70,3615,3616],{"class":76},"      :key",[70,3618,1323],{"class":80},[70,3620,3621],{"class":419},"\"`p${i}`\"\n",[70,3623,3624,3627,3629],{"class":72,"line":352},[70,3625,3626],{"class":76},"      :rect",[70,3628,1323],{"class":80},[70,3630,3631],{"class":419},"\"p\"\n",[70,3633,3634],{"class":72,"line":364},[70,3635,3636],{"class":80},"    />\n",[70,3638,3639,3641,3644,3647,3649,3652,3655,3657,3660,3663,3665,3668],{"class":72,"line":375},[70,3640,3529],{"class":80},[70,3642,3643],{"class":413},"Saw",[70,3645,3646],{"class":76}," v-for",[70,3648,1323],{"class":80},[70,3650,3651],{"class":419},"\"(s, i) in SAWS\"",[70,3653,3654],{"class":76}," :key",[70,3656,1323],{"class":80},[70,3658,3659],{"class":419},"\"`s${i}`\"",[70,3661,3662],{"class":76}," :pos",[70,3664,1323],{"class":80},[70,3666,3667],{"class":419},"\"s\"",[70,3669,3535],{"class":80},[70,3671,3672,3674,3677],{"class":72,"line":381},[70,3673,3529],{"class":80},[70,3675,3676],{"class":413},"Goal",[70,3678,3535],{"class":80},[70,3680,3681],{"class":72,"line":474},[70,3682,164],{"emptyLinePlaceholder":163},[70,3684,3685,3687,3690,3693,3695,3698,3701,3703,3706,3709,3711,3714],{"class":72,"line":480},[70,3686,3529],{"class":80},[70,3688,3689],{"class":413},"Player",[70,3691,3692],{"class":76}," :active",[70,3694,1323],{"class":80},[70,3696,3697],{"class":419},"\"active\"",[70,3699,3700],{"class":76}," @hit",[70,3702,1323],{"class":80},[70,3704,3705],{"class":419},"\"onHit\"",[70,3707,3708],{"class":76}," @win",[70,3710,1323],{"class":80},[70,3712,3713],{"class":419},"\"onWin\"",[70,3715,3535],{"class":80},[70,3717,3718],{"class":72,"line":485},[70,3719,164],{"emptyLinePlaceholder":163},[70,3721,3722,3724,3727,3730,3732,3735,3738,3740,3743],{"class":72,"line":496},[70,3723,3529],{"class":80},[70,3725,3726],{"class":413},"Hud",[70,3728,3729],{"class":76}," :lives",[70,3731,1323],{"class":80},[70,3733,3734],{"class":419},"\"lives\"",[70,3736,3737],{"class":76}," :won",[70,3739,1323],{"class":80},[70,3741,3742],{"class":419},"\"won\"",[70,3744,3535],{"class":80},[70,3746,3747,3749,3751],{"class":72,"line":507},[70,3748,3540],{"class":80},[70,3750,3579],{"class":413},[70,3752,3415],{"class":80},[70,3754,3755,3757,3759],{"class":72,"line":518},[70,3756,3455],{"class":80},[70,3758,2262],{"class":413},[70,3760,3415],{"class":80},[11,3762,3763,3764,3767,3768,3771,3772,974,3775,3778,3779,3782],{},"We are using ",[67,3765,3766],{},"v-for"," to render platforms and saws, and we have a ",[67,3769,3770],{},"\u003CPlayer>"," emitting ",[67,3773,3774],{},"@hit",[67,3776,3777],{},"@win"," to its parent, just like a form component emitting ",[67,3780,3781],{},"@submit",". A game built with components, passing props down and events up.",[11,3784,3785],{},"Suddenly, it feels familiar again!",[11,3787,3788,3789,3791,3792,3795,3796,3799,3800,3803,3804,3807],{},"But remember: this uses a custom Vue renderer, so when you write ",[67,3790,3770],{},", ",[67,3793,3794],{},"\u003CHud>",", or ",[67,3797,3798],{},"\u003CGoal>",", you're ultimately creating a scene graph of PixiJS objects instead of DOM elements. We don't have access to classic ",[67,3801,3802],{},"\u003Cbutton>"," or ",[67,3805,3806],{},"\u003Cinput>"," in the canvas world (HTML in canvas is technically possible... but that's a topic for another day).",[11,3809,3810,3811,974,3813,3816],{},"Everything else is the Vue you already know: directives like ",[67,3812,3766],{},[67,3814,3815],{},"v-if",", props, refs, components, and emits. All of it works exactly as it does in a web app.",[11,3818,3819],{},"However, there's a couple of gotchas!",[1232,3821,3823],{"id":3822},"gotcha-1-containers","Gotcha 1: Containers",[11,3825,3826,3827,3830,3831,3834],{},"In a web app, a parent contains its children through CSS layout. In a scene graph, a child's position is ",[52,3828,3829],{},"relative to its parent",". Move a ",[67,3832,3833],{},"\u003Ccontainer>"," and everything inside it moves too. That's how you slide an entire level, or move an enemy and its health bar together as a single unit.",[2756,3836],{"src":3837,"title":3838,"loading":2760,"scrolling":2761,"style":3839},"/demos/building-a-platformer-game-with-vue-and-pixijs/scene-graph.html","A parent container moving its children together","width:100%;height:250px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,3841,3842],{},"So the thing painting pixels to a canvas is a Vue component tree. You already know how to build one of those.",[1232,3844,3846],{"id":3845},"gotcha-2-down-is-positive","Gotcha 2: Down Is Positive?",[11,3848,3849,3850,3853,3854,3857,3858,3861],{},"On a screen, ",[52,3851,3852],{},"Y goes down."," The origin ",[67,3855,3856],{},"(0, 0)"," sits in the top-left corner, and a bigger Y value means lower on the screen. School-math Y went ",[256,3859,3860],{},"up",", which is exactly why this trips people up.",[11,3863,3864,3865,3868,3869,3872,3873,3876],{},"It's the same as CSS ",[67,3866,3867],{},"top",": a ",[67,3870,3871],{},"top: 200px"," element sits below a ",[67,3874,3875],{},"top: 0"," one.",[11,3878,3879,3880,3883,3884,3887],{},"So, to make the player ",[52,3881,3882],{},"jump",", you set its vertical velocity to a ",[256,3885,3886],{},"negative"," number, because up means heading toward smaller Y:",[59,3889,3891],{"className":3227,"code":3890,"language":3229,"meta":65,"style":65},"// jump velocity is NEGATIVE (up is smaller Y)\nexport const PHYS = {\n  speed: 3.4,\n  gravity: 0.55,\n  jump: -11.5,\n  pw: 28,\n  ph: 28,\n}\n",[67,3892,3893,3898,3913,3923,3933,3945,3955,3964],{"__ignoreMap":65},[70,3894,3895],{"class":72,"line":73},[70,3896,3897],{"class":1301},"// jump velocity is NEGATIVE (up is smaller Y)\n",[70,3899,3900,3903,3906,3909,3911],{"class":72,"line":160},[70,3901,3902],{"class":413},"export",[70,3904,3905],{"class":283}," const",[70,3907,3908],{"class":80}," PHYS ",[70,3910,1323],{"class":413},[70,3912,3315],{"class":80},[70,3914,3915,3918,3921],{"class":72,"line":167},[70,3916,3917],{"class":80},"  speed: ",[70,3919,3920],{"class":1311},"3.4",[70,3922,294],{"class":80},[70,3924,3925,3928,3931],{"class":72,"line":175},[70,3926,3927],{"class":80},"  gravity: ",[70,3929,3930],{"class":1311},"0.55",[70,3932,294],{"class":80},[70,3934,3935,3938,3940,3943],{"class":72,"line":183},[70,3936,3937],{"class":80},"  jump: ",[70,3939,77],{"class":413},[70,3941,3942],{"class":1311},"11.5",[70,3944,294],{"class":80},[70,3946,3947,3950,3953],{"class":72,"line":191},[70,3948,3949],{"class":80},"  pw: ",[70,3951,3952],{"class":1311},"28",[70,3954,294],{"class":80},[70,3956,3957,3960,3962],{"class":72,"line":340},[70,3958,3959],{"class":80},"  ph: ",[70,3961,3952],{"class":1311},[70,3963,294],{"class":80},[70,3965,3966],{"class":72,"line":352},[70,3967,384],{"class":80},[11,3969,3970,3971,3791,3974,3977,3978,3980,3981,3984,3985,3987,3988,1130],{},"Throughout these snippets I refer to the constants as bare ",[67,3972,3973],{},"speed",[67,3975,3976],{},"gravity",", and ",[67,3979,3882],{}," (the game destructures them out of ",[67,3982,3983],{},"PHYS","). So when you see a lone ",[67,3986,3976],{}," later, that's this ",[67,3989,3930],{},[11,3991,3992,3993,3996],{},"Gravity, meanwhile, is ",[256,3994,3995],{},"positive",", constantly pulling Y back down. Up is negative, down is positive.",[1232,3998,4000],{"id":3999},"gotcha-3-physics","Gotcha 3: Physics!",[11,4002,4003,4004,4007],{},"I'm not great at math. That's why talking about a ",[256,4005,4006],{},"game physics engine"," kind of scares me. Thing is: physics for a platformer just comes down to two rules and middle-school arithmetic, run 60 times a second. Let's break it down.",[11,4009,4010],{},"You track two numbers per moving object:",[123,4012,4013,4029],{},[126,4014,4015,4018,4019,974,4022,4025,4026,4028],{},[52,4016,4017],{},"Position",", where it is: ",[67,4020,4021],{},"x",[67,4023,4024],{},"y",". These are your ",[67,4027,2747],{},"s.",[126,4030,4031,4034,4035,974,4038,4041],{},[52,4032,4033],{},"Velocity",", how fast it's moving: ",[67,4036,4037],{},"vx",[67,4039,4040],{},"vy",". Plain variables.",[11,4043,4044],{},"In the loop, that's three lines doing the heavy lifting:",[59,4046,4048],{"className":3227,"code":4047,"language":3229,"meta":65,"style":65},"onTick(({ deltaTime }) => {\n  const dt = Math.min(deltaTime, 2)\n\n  // gravity tugs velocity downward every frame (down = +)\n  vy += gravity * dt // gravity = 0.55\n\n  // velocity moves the position\n  x.value += vx * dt\n  y.value += vy * dt\n\n  // ...then we resolve collisions, next section\n})\n",[67,4049,4050,4064,4087,4091,4096,4113,4117,4122,4136,4150,4154,4159],{"__ignoreMap":65},[70,4051,4052,4054,4056,4058,4060,4062],{"class":72,"line":73},[70,4053,3219],{"class":76},[70,4055,3304],{"class":80},[70,4057,3098],{"class":1329},[70,4059,3309],{"class":80},[70,4061,3312],{"class":283},[70,4063,3315],{"class":80},[70,4065,4066,4068,4071,4073,4076,4079,4082,4085],{"class":72,"line":160},[70,4067,2999],{"class":283},[70,4069,4070],{"class":80}," dt ",[70,4072,1323],{"class":413},[70,4074,4075],{"class":80}," Math.",[70,4077,4078],{"class":76},"min",[70,4080,4081],{"class":80},"(deltaTime, ",[70,4083,4084],{"class":1311},"2",[70,4086,3041],{"class":80},[70,4088,4089],{"class":72,"line":167},[70,4090,164],{"emptyLinePlaceholder":163},[70,4092,4093],{"class":72,"line":175},[70,4094,4095],{"class":1301},"  // gravity tugs velocity downward every frame (down = +)\n",[70,4097,4098,4101,4103,4106,4108,4110],{"class":72,"line":183},[70,4099,4100],{"class":80},"  vy ",[70,4102,3323],{"class":413},[70,4104,4105],{"class":80}," gravity ",[70,4107,3328],{"class":413},[70,4109,4070],{"class":80},[70,4111,4112],{"class":1301},"// gravity = 0.55\n",[70,4114,4115],{"class":72,"line":191},[70,4116,164],{"emptyLinePlaceholder":163},[70,4118,4119],{"class":72,"line":340},[70,4120,4121],{"class":1301},"  // velocity moves the position\n",[70,4123,4124,4126,4128,4131,4133],{"class":72,"line":352},[70,4125,3320],{"class":80},[70,4127,3323],{"class":413},[70,4129,4130],{"class":80}," vx ",[70,4132,3328],{"class":413},[70,4134,4135],{"class":80}," dt\n",[70,4137,4138,4141,4143,4146,4148],{"class":72,"line":364},[70,4139,4140],{"class":80},"  y.value ",[70,4142,3323],{"class":413},[70,4144,4145],{"class":80}," vy ",[70,4147,3328],{"class":413},[70,4149,4135],{"class":80},[70,4151,4152],{"class":72,"line":375},[70,4153,164],{"emptyLinePlaceholder":163},[70,4155,4156],{"class":72,"line":381},[70,4157,4158],{"class":1301},"  // ...then we resolve collisions, next section\n",[70,4160,4161],{"class":72,"line":474},[70,4162,3336],{"class":80},[11,4164,4165],{},"The ordering matters: velocity updates before position. This is a simple physics choice. There are two ways to update movement each frame:",[123,4167,4168,4171],{},[126,4169,4170],{},"Move the object, then apply forces",[126,4172,4173],{},"Apply forces, then move the object",[11,4175,4176],{},"They look almost identical in simple cases like jumping. The difference is tiny, sometimes just a fraction of a pixel per frame.",[11,4178,4179],{},"But the order matters when things get more dynamic, like springs, bouncing, or anything that should feel stable over time. One ordering can slowly add extra energy into the system, making motion feel slightly “off” after many frames. This version avoids that and stays stable, which is why it's the common default in games.",[11,4181,4182,4183,4185,4186,4188],{},"A jump is just setting ",[67,4184,4040],{}," to a large negative number once. Gravity does the rest: it slows the rise, pauses at the top, then accelerates the fall. The parabolic arc is emergent. Nobody draws that curve; it falls out of adding ",[67,4187,3930],{}," to a number every frame.",[11,4190,4191,4192,4195,4196,4198,4199,4202],{},"Tap ",[52,4193,4194],{},"Jump"," and watch ",[67,4197,4040],{},". It starts at ",[67,4200,4201],{},"-11.5",", climbs toward zero as the box rises, crosses zero at the peak, then goes positive on the way down:",[2756,4204],{"src":4205,"title":4206,"loading":2760,"scrolling":2761,"style":4207},"/demos/building-a-platformer-game-with-vue-and-pixijs/gravity.html","A jumping box driven by gravity and velocity","width:100%;height:280px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,4209,4210,4211,974,4214,4217],{},"There are no \"correct\" numbers here. Bigger gravity makes heavier, snappier jumps; smaller gravity gives floaty moon physics. Game feel is mostly twiddling these constants until the jump feels right under your thumb. This game landed on ",[67,4212,4213],{},"gravity 0.55",[67,4215,4216],{},"jump -11.5"," after a lot of tapping.",[1232,4219,4221],{"id":4220},"gotcha-4-handling-input","Gotcha 4: Handling Input",[11,4223,4224,4225,4228,4229,4232],{},"Games ",[52,4226,4227],{},"poll"," input instead of reacting to it. In a web form you handle a ",[67,4230,4231],{},"@keydown"," the moment it arrives, but that's too jittery for a game: held keys auto-repeat with gaps, and simultaneous inputs like left-plus-jump become inconsistent. So instead of reacting directly, you keep a running set of which keys are currently held, and every frame the loop reads that set.",[11,4234,4235],{},"The events only maintain state. They never move anything:",[59,4237,4239],{"className":3227,"code":4238,"language":3229,"meta":65,"style":65},"const keys = new Set\u003Cstring>()\n\nfunction onKeyDown(e: KeyboardEvent) {\n  keys.add(e.key)\n}\n\nfunction onKeyUp(e: KeyboardEvent) {\n  keys.delete(e.key)\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', onKeyDown)\n  window.addEventListener('keyup', onKeyUp)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeyDown)\n  window.removeEventListener('keyup', onKeyUp)\n})\n",[67,4240,4241,4264,4268,4288,4299,4303,4307,4324,4333,4337,4341,4353,4369,4383,4387,4391,4402,4415,4427],{"__ignoreMap":65},[70,4242,4243,4245,4248,4250,4253,4256,4258,4261],{"class":72,"line":73},[70,4244,3266],{"class":283},[70,4246,4247],{"class":80}," keys ",[70,4249,1323],{"class":413},[70,4251,4252],{"class":413}," new",[70,4254,4255],{"class":76}," Set",[70,4257,3399],{"class":80},[70,4259,4260],{"class":283},"string",[70,4262,4263],{"class":80},">()\n",[70,4265,4266],{"class":72,"line":160},[70,4267,164],{"emptyLinePlaceholder":163},[70,4269,4270,4272,4275,4277,4280,4282,4286],{"class":72,"line":167},[70,4271,2818],{"class":283},[70,4273,4274],{"class":76}," onKeyDown",[70,4276,2988],{"class":80},[70,4278,4279],{"class":1329},"e",[70,4281,1339],{"class":413},[70,4283,4285],{"class":4284},"soZtE"," KeyboardEvent",[70,4287,2994],{"class":80},[70,4289,4290,4293,4296],{"class":72,"line":175},[70,4291,4292],{"class":80},"  keys.",[70,4294,4295],{"class":76},"add",[70,4297,4298],{"class":80},"(e.key)\n",[70,4300,4301],{"class":72,"line":183},[70,4302,384],{"class":80},[70,4304,4305],{"class":72,"line":191},[70,4306,164],{"emptyLinePlaceholder":163},[70,4308,4309,4311,4314,4316,4318,4320,4322],{"class":72,"line":340},[70,4310,2818],{"class":283},[70,4312,4313],{"class":76}," onKeyUp",[70,4315,2988],{"class":80},[70,4317,4279],{"class":1329},[70,4319,1339],{"class":413},[70,4321,4285],{"class":4284},[70,4323,2994],{"class":80},[70,4325,4326,4328,4331],{"class":72,"line":352},[70,4327,4292],{"class":80},[70,4329,4330],{"class":76},"delete",[70,4332,4298],{"class":80},[70,4334,4335],{"class":72,"line":364},[70,4336,384],{"class":80},[70,4338,4339],{"class":72,"line":375},[70,4340,164],{"emptyLinePlaceholder":163},[70,4342,4343,4346,4349,4351],{"class":72,"line":381},[70,4344,4345],{"class":76},"onMounted",[70,4347,4348],{"class":80},"(() ",[70,4350,3312],{"class":283},[70,4352,3315],{"class":80},[70,4354,4355,4358,4361,4363,4366],{"class":72,"line":474},[70,4356,4357],{"class":80},"  window.",[70,4359,4360],{"class":76},"addEventListener",[70,4362,2988],{"class":80},[70,4364,4365],{"class":419},"'keydown'",[70,4367,4368],{"class":80},", onKeyDown)\n",[70,4370,4371,4373,4375,4377,4380],{"class":72,"line":480},[70,4372,4357],{"class":80},[70,4374,4360],{"class":76},[70,4376,2988],{"class":80},[70,4378,4379],{"class":419},"'keyup'",[70,4381,4382],{"class":80},", onKeyUp)\n",[70,4384,4385],{"class":72,"line":485},[70,4386,3336],{"class":80},[70,4388,4389],{"class":72,"line":496},[70,4390,164],{"emptyLinePlaceholder":163},[70,4392,4393,4396,4398,4400],{"class":72,"line":507},[70,4394,4395],{"class":76},"onUnmounted",[70,4397,4348],{"class":80},[70,4399,3312],{"class":283},[70,4401,3315],{"class":80},[70,4403,4404,4406,4409,4411,4413],{"class":72,"line":518},[70,4405,4357],{"class":80},[70,4407,4408],{"class":76},"removeEventListener",[70,4410,2988],{"class":80},[70,4412,4365],{"class":419},[70,4414,4368],{"class":80},[70,4416,4417,4419,4421,4423,4425],{"class":72,"line":525},[70,4418,4357],{"class":80},[70,4420,4408],{"class":76},[70,4422,2988],{"class":80},[70,4424,4379],{"class":419},[70,4426,4382],{"class":80},[70,4428,4429],{"class":72,"line":536},[70,4430,3336],{"class":80},[11,4432,4433,4434,4436],{},"That same single ",[67,4435,3219],{}," reads them every frame and converts held keys into velocity:",[59,4438,4440],{"className":3227,"code":4439,"language":3229,"meta":65,"style":65},"onTick(() => {\n  const left =\n    keys.has('ArrowLeft') || keys.has('a') || keys.has('A')\n\n  const right =\n    keys.has('ArrowRight') || keys.has('d') || keys.has('D')\n\n  vx = (right ? speed : 0) - (left ? speed : 0)\n})\n",[67,4441,4442,4452,4462,4506,4510,4519,4558,4562,4598],{"__ignoreMap":65},[70,4443,4444,4446,4448,4450],{"class":72,"line":73},[70,4445,3219],{"class":76},[70,4447,4348],{"class":80},[70,4449,3312],{"class":283},[70,4451,3315],{"class":80},[70,4453,4454,4456,4459],{"class":72,"line":160},[70,4455,2999],{"class":283},[70,4457,4458],{"class":80}," left ",[70,4460,4461],{"class":413},"=\n",[70,4463,4464,4467,4470,4472,4475,4478,4481,4484,4486,4488,4491,4493,4495,4497,4499,4501,4504],{"class":72,"line":167},[70,4465,4466],{"class":80},"    keys.",[70,4468,4469],{"class":76},"has",[70,4471,2988],{"class":80},[70,4473,4474],{"class":419},"'ArrowLeft'",[70,4476,4477],{"class":80},") ",[70,4479,4480],{"class":413},"||",[70,4482,4483],{"class":80}," keys.",[70,4485,4469],{"class":76},[70,4487,2988],{"class":80},[70,4489,4490],{"class":419},"'a'",[70,4492,4477],{"class":80},[70,4494,4480],{"class":413},[70,4496,4483],{"class":80},[70,4498,4469],{"class":76},[70,4500,2988],{"class":80},[70,4502,4503],{"class":419},"'A'",[70,4505,3041],{"class":80},[70,4507,4508],{"class":72,"line":175},[70,4509,164],{"emptyLinePlaceholder":163},[70,4511,4512,4514,4517],{"class":72,"line":183},[70,4513,2999],{"class":283},[70,4515,4516],{"class":80}," right ",[70,4518,4461],{"class":413},[70,4520,4521,4523,4525,4527,4530,4532,4534,4536,4538,4540,4543,4545,4547,4549,4551,4553,4556],{"class":72,"line":191},[70,4522,4466],{"class":80},[70,4524,4469],{"class":76},[70,4526,2988],{"class":80},[70,4528,4529],{"class":419},"'ArrowRight'",[70,4531,4477],{"class":80},[70,4533,4480],{"class":413},[70,4535,4483],{"class":80},[70,4537,4469],{"class":76},[70,4539,2988],{"class":80},[70,4541,4542],{"class":419},"'d'",[70,4544,4477],{"class":80},[70,4546,4480],{"class":413},[70,4548,4483],{"class":80},[70,4550,4469],{"class":76},[70,4552,2988],{"class":80},[70,4554,4555],{"class":419},"'D'",[70,4557,3041],{"class":80},[70,4559,4560],{"class":72,"line":340},[70,4561,164],{"emptyLinePlaceholder":163},[70,4563,4564,4567,4569,4572,4574,4576,4578,4581,4583,4585,4588,4590,4592,4594,4596],{"class":72,"line":352},[70,4565,4566],{"class":80},"  vx ",[70,4568,1323],{"class":413},[70,4570,4571],{"class":80}," (right ",[70,4573,2926],{"class":413},[70,4575,3288],{"class":80},[70,4577,1339],{"class":413},[70,4579,4580],{"class":1311}," 0",[70,4582,4477],{"class":80},[70,4584,77],{"class":413},[70,4586,4587],{"class":80}," (left ",[70,4589,2926],{"class":413},[70,4591,3288],{"class":80},[70,4593,1339],{"class":413},[70,4595,4580],{"class":1311},[70,4597,3041],{"class":80},[70,4599,4600],{"class":72,"line":364},[70,4601,3336],{"class":80},[11,4603,4604],{},"Keyboard events are fast and bursty; the loop is slow and steady. Letting events only update state, and letting the loop read that state, keeps movement smooth. Walking and jumping at the same time just works.",[11,4606,4607,4608,4611],{},"Jumping is the exception. Holding a key triggers auto-repeat, so if jump just checked “is the key down?”, you'd bounce like a pogo stick. Instead we detect the ",[256,4609,4610],{},"edge"," (the moment the key is first pressed) and store a one-shot flag.",[11,4613,4614],{},"The keydown handler becomes:",[59,4616,4618],{"className":3227,"code":4617,"language":3229,"meta":65,"style":65},"function onKeyDown(e: KeyboardEvent) {\n  keys.add(e.key)\n\n  if (isJump(e.key)) {\n    // only the first press, not auto-repeat\n    if (!e.repeat) wantJump = true\n    e.preventDefault()\n  }\n}\n",[67,4619,4620,4636,4644,4648,4661,4666,4683,4693,4697],{"__ignoreMap":65},[70,4621,4622,4624,4626,4628,4630,4632,4634],{"class":72,"line":73},[70,4623,2818],{"class":283},[70,4625,4274],{"class":76},[70,4627,2988],{"class":80},[70,4629,4279],{"class":1329},[70,4631,1339],{"class":413},[70,4633,4285],{"class":4284},[70,4635,2994],{"class":80},[70,4637,4638,4640,4642],{"class":72,"line":160},[70,4639,4292],{"class":80},[70,4641,4295],{"class":76},[70,4643,4298],{"class":80},[70,4645,4646],{"class":72,"line":167},[70,4647,164],{"emptyLinePlaceholder":163},[70,4649,4650,4653,4655,4658],{"class":72,"line":175},[70,4651,4652],{"class":413},"  if",[70,4654,3029],{"class":80},[70,4656,4657],{"class":76},"isJump",[70,4659,4660],{"class":80},"(e.key)) {\n",[70,4662,4663],{"class":72,"line":183},[70,4664,4665],{"class":1301},"    // only the first press, not auto-repeat\n",[70,4667,4668,4671,4673,4676,4679,4681],{"class":72,"line":191},[70,4669,4670],{"class":413},"    if",[70,4672,3029],{"class":80},[70,4674,4675],{"class":413},"!",[70,4677,4678],{"class":80},"e.repeat) wantJump ",[70,4680,1323],{"class":413},[70,4682,2203],{"class":1311},[70,4684,4685,4688,4691],{"class":72,"line":340},[70,4686,4687],{"class":80},"    e.",[70,4689,4690],{"class":76},"preventDefault",[70,4692,2832],{"class":80},[70,4694,4695],{"class":72,"line":352},[70,4696,378],{"class":80},[70,4698,4699],{"class":72,"line":364},[70,4700,384],{"class":80},[11,4702,4703,3099,4706,4709,4710,4713],{},[67,4704,4705],{},"e.repeat",[67,4707,4708],{},"false"," on the initial press and ",[67,4711,4712],{},"true"," for the browser's auto-generated repeats. Using it ensures one press produces exactly one jump.",[11,4715,4716,4717,4720],{},"The loop consumes that flag. Early in the same tick, it checks both the request and the ",[67,4718,4719],{},"onGround"," state from the previous frame's collision step, then applies the jump:",[59,4722,4724],{"className":3227,"code":4723,"language":3229,"meta":65,"style":65},"if (wantJump && onGround) {\n  vy = jump\n  onGround = false\n  wantJump = false\n}\n",[67,4725,4726,4740,4749,4759,4768],{"__ignoreMap":65},[70,4727,4728,4731,4734,4737],{"class":72,"line":73},[70,4729,4730],{"class":413},"if",[70,4732,4733],{"class":80}," (wantJump ",[70,4735,4736],{"class":413},"&&",[70,4738,4739],{"class":80}," onGround) {\n",[70,4741,4742,4744,4746],{"class":72,"line":160},[70,4743,4100],{"class":80},[70,4745,1323],{"class":413},[70,4747,4748],{"class":80}," jump\n",[70,4750,4751,4754,4756],{"class":72,"line":167},[70,4752,4753],{"class":80},"  onGround ",[70,4755,1323],{"class":413},[70,4757,4758],{"class":1311}," false\n",[70,4760,4761,4764,4766],{"class":72,"line":175},[70,4762,4763],{"class":80},"  wantJump ",[70,4765,1323],{"class":413},[70,4767,4758],{"class":1311},[70,4769,4770],{"class":72,"line":183},[70,4771,384],{"class":80},[11,4773,4774,4775,4777,4778,4781],{},"That ties it together: collision sets ",[67,4776,4719],{},", input sets ",[67,4779,4780],{},"wantJump",", and the loop decides when both conditions are true.",[38,4783,4785],{"id":4784},"lets-make-things-collide","Let's Make Things Collide",[11,4787,4788],{},"Alright, we're ready to start building the actual platformer!",[11,4790,4791,4792,1130],{},"But first, a problem we created and never solved. The player has velocity and gravity now, so they fall. And they keep falling, straight through every platform, off the bottom of the screen, gone. Nothing stops them, because nothing is ",[256,4793,4794],{},"checking",[11,4796,4797,4798,4801],{},"That check is most of what a platformer is. Every frame, before anything else moves, you ask one yes/no question of every platform: ",[52,4799,4800],{},"is the player's box overlapping this one?"," If it is, you shove the player back out so they end up resting against it instead of sunk inside it.",[11,4803,4804,4805,4808,4809,3791,4811,3791,4813,3977,4816,4819,4820,4823,4824,4827],{},"You've done something similar before: in the DOM, ",[67,4806,4807],{},"getBoundingClientRect()"," hands you an ",[67,4810,4021],{},[67,4812,4024],{},[67,4814,4815],{},"width",[67,4817,4818],{},"height",", and you compare two of those boxes to see if a dropdown clears its trigger or a tooltip runs off-screen. In a game, collision is that same comparison, just run 60 times a second. Every platform in the level is a ",[67,4821,4822],{},"Rect",", a plain ",[67,4825,4826],{},"{ x, y, w, h }",", the same four numbers that bounding box gives you.",[11,4829,4830,4831,4834,4835,4838],{},"The comparison has an intimidating name, ",[52,4832,4833],{},"AABB"," (Axis-Aligned Bounding Box), and a friendly definition: two rectangles overlap only when they overlap on ",[256,4836,4837],{},"both"," the X and Y axes. Miss on either one and there's a gap between them. Here it is straight from the game, annotated so each line reads in plain English:",[59,4840,4842],{"className":3227,"code":4841,"language":3229,"meta":65,"style":65},"function overlaps(\n  ax: number, ay: number,\n  aw: number, ah: number,\n  b: Rect,\n) {\n  return (\n    // a's left is left of b's right\n    ax \u003C b.x + b.w &&\n    // a's right is right of b's left\n    ax + aw > b.x &&\n    // a's top is above b's bottom\n    ay \u003C b.y + b.h &&\n    // a's bottom is below b's top\n    ay + ah > b.y\n  )\n}\n",[67,4843,4844,4854,4875,4895,4907,4911,4919,4924,4943,4948,4963,4968,4985,4990,5004,5009],{"__ignoreMap":65},[70,4845,4846,4848,4851],{"class":72,"line":73},[70,4847,2818],{"class":283},[70,4849,4850],{"class":76}," overlaps",[70,4852,4853],{"class":80},"(\n",[70,4855,4856,4859,4861,4864,4866,4869,4871,4873],{"class":72,"line":160},[70,4857,4858],{"class":1329},"  ax",[70,4860,1339],{"class":413},[70,4862,4863],{"class":283}," number",[70,4865,3791],{"class":80},[70,4867,4868],{"class":1329},"ay",[70,4870,1339],{"class":413},[70,4872,4863],{"class":283},[70,4874,294],{"class":80},[70,4876,4877,4880,4882,4884,4886,4889,4891,4893],{"class":72,"line":167},[70,4878,4879],{"class":1329},"  aw",[70,4881,1339],{"class":413},[70,4883,4863],{"class":283},[70,4885,3791],{"class":80},[70,4887,4888],{"class":1329},"ah",[70,4890,1339],{"class":413},[70,4892,4863],{"class":283},[70,4894,294],{"class":80},[70,4896,4897,4900,4902,4905],{"class":72,"line":175},[70,4898,4899],{"class":1329},"  b",[70,4901,1339],{"class":413},[70,4903,4904],{"class":4284}," Rect",[70,4906,294],{"class":80},[70,4908,4909],{"class":72,"line":183},[70,4910,2994],{"class":80},[70,4912,4913,4916],{"class":72,"line":191},[70,4914,4915],{"class":413},"  return",[70,4917,4918],{"class":80}," (\n",[70,4920,4921],{"class":72,"line":340},[70,4922,4923],{"class":1301},"    // a's left is left of b's right\n",[70,4925,4926,4929,4931,4934,4937,4940],{"class":72,"line":352},[70,4927,4928],{"class":80},"    ax ",[70,4930,3399],{"class":413},[70,4932,4933],{"class":80}," b.x ",[70,4935,4936],{"class":413},"+",[70,4938,4939],{"class":80}," b.w ",[70,4941,4942],{"class":413},"&&\n",[70,4944,4945],{"class":72,"line":364},[70,4946,4947],{"class":1301},"    // a's right is right of b's left\n",[70,4949,4950,4952,4954,4957,4959,4961],{"class":72,"line":375},[70,4951,4928],{"class":80},[70,4953,4936],{"class":413},[70,4955,4956],{"class":80}," aw ",[70,4958,1356],{"class":413},[70,4960,4933],{"class":80},[70,4962,4942],{"class":413},[70,4964,4965],{"class":72,"line":381},[70,4966,4967],{"class":1301},"    // a's top is above b's bottom\n",[70,4969,4970,4973,4975,4978,4980,4983],{"class":72,"line":474},[70,4971,4972],{"class":80},"    ay ",[70,4974,3399],{"class":413},[70,4976,4977],{"class":80}," b.y ",[70,4979,4936],{"class":413},[70,4981,4982],{"class":80}," b.h ",[70,4984,4942],{"class":413},[70,4986,4987],{"class":72,"line":480},[70,4988,4989],{"class":1301},"    // a's bottom is below b's top\n",[70,4991,4992,4994,4996,4999,5001],{"class":72,"line":485},[70,4993,4972],{"class":80},[70,4995,4936],{"class":413},[70,4997,4998],{"class":80}," ah ",[70,5000,1356],{"class":413},[70,5002,5003],{"class":80}," b.y\n",[70,5005,5006],{"class":72,"line":496},[70,5007,5008],{"class":80},"  )\n",[70,5010,5011],{"class":72,"line":507},[70,5012,384],{"class":80},[11,5014,5015,5016,5018,5019,5021,5022,5025,5026,5029,5030,5032],{},"If that returns ",[67,5017,4712],{}," while the player is falling, you snap their feet to the top of the platform and zero out ",[67,5020,4040],{},". Now they're standing. The box below tracks back and forth and flips to ",[52,5023,5024],{},"red"," the instant ",[67,5027,5028],{},"overlaps()"," turns ",[67,5031,4712],{}," against the wall:",[2756,5034],{"src":5035,"title":5036,"loading":2760,"scrolling":2761,"style":5037},"/demos/building-a-platformer-game-with-vue-and-pixijs/collision.html","Two rectangles overlapping (AABB collision)","width:100%;height:220px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,5039,5040,5041,5044],{},"Detecting the overlap is half the job. ",[256,5042,5043],{},"Resolving"," it is the other half, and there's one move that makes it all click: handle one axis at a time. The loop applies horizontal movement and pushes the player out of any wall it hit, then applies vertical movement and pushes out of any floor or ceiling:",[59,5046,5048],{"className":3227,"code":5047,"language":3229,"meta":65,"style":65},"// horizontal move, then resolve against every platform\nx.value += vx * dt\nfor (const p of PLATFORMS) {\n  if (overlaps(x.value, y.value, pw, ph, p)) {\n    // moving right: snap to the wall's left face\n    if (vx > 0) x.value = p.x - pw\n    // moving left: snap to its right face\n    else if (vx \u003C 0) x.value = p.x + p.w\n    vx = 0\n  }\n}\n\n// vertical move, then resolve again\ny.value += vy * dt\nonGround = false\nfor (const p of PLATFORMS) {\n  if (overlaps(x.value, y.value, pw, ph, p)) {\n    if (vy > 0) {\n      // landed on top\n      y.value = p.y - ph\n      onGround = true\n      vy = 0\n    } else if (vy \u003C 0) {\n      // bonked your head\n      y.value = p.y + p.h\n      vy = 0\n    }\n  }\n}\n",[67,5049,5050,5055,5068,5086,5098,5103,5127,5132,5157,5166,5170,5174,5178,5183,5196,5205,5219,5229,5242,5247,5262,5271,5280,5298,5303,5316,5324,5329,5333],{"__ignoreMap":65},[70,5051,5052],{"class":72,"line":73},[70,5053,5054],{"class":1301},"// horizontal move, then resolve against every platform\n",[70,5056,5057,5060,5062,5064,5066],{"class":72,"line":160},[70,5058,5059],{"class":80},"x.value ",[70,5061,3323],{"class":413},[70,5063,4130],{"class":80},[70,5065,3328],{"class":413},[70,5067,4135],{"class":80},[70,5069,5070,5073,5075,5077,5080,5083],{"class":72,"line":167},[70,5071,5072],{"class":413},"for",[70,5074,3029],{"class":80},[70,5076,3266],{"class":283},[70,5078,5079],{"class":80}," p ",[70,5081,5082],{"class":413},"of",[70,5084,5085],{"class":80}," PLATFORMS) {\n",[70,5087,5088,5090,5092,5095],{"class":72,"line":175},[70,5089,4652],{"class":413},[70,5091,3029],{"class":80},[70,5093,5094],{"class":76},"overlaps",[70,5096,5097],{"class":80},"(x.value, y.value, pw, ph, p)) {\n",[70,5099,5100],{"class":72,"line":183},[70,5101,5102],{"class":1301},"    // moving right: snap to the wall's left face\n",[70,5104,5105,5107,5110,5112,5114,5117,5119,5122,5124],{"class":72,"line":191},[70,5106,4670],{"class":413},[70,5108,5109],{"class":80}," (vx ",[70,5111,1356],{"class":413},[70,5113,4580],{"class":1311},[70,5115,5116],{"class":80},") x.value ",[70,5118,1323],{"class":413},[70,5120,5121],{"class":80}," p.x ",[70,5123,77],{"class":413},[70,5125,5126],{"class":80}," pw\n",[70,5128,5129],{"class":72,"line":340},[70,5130,5131],{"class":1301},"    // moving left: snap to its right face\n",[70,5133,5134,5137,5140,5142,5144,5146,5148,5150,5152,5154],{"class":72,"line":352},[70,5135,5136],{"class":413},"    else",[70,5138,5139],{"class":413}," if",[70,5141,5109],{"class":80},[70,5143,3399],{"class":413},[70,5145,4580],{"class":1311},[70,5147,5116],{"class":80},[70,5149,1323],{"class":413},[70,5151,5121],{"class":80},[70,5153,4936],{"class":413},[70,5155,5156],{"class":80}," p.w\n",[70,5158,5159,5162,5164],{"class":72,"line":364},[70,5160,5161],{"class":80},"    vx ",[70,5163,1323],{"class":413},[70,5165,2975],{"class":1311},[70,5167,5168],{"class":72,"line":375},[70,5169,378],{"class":80},[70,5171,5172],{"class":72,"line":381},[70,5173,384],{"class":80},[70,5175,5176],{"class":72,"line":474},[70,5177,164],{"emptyLinePlaceholder":163},[70,5179,5180],{"class":72,"line":480},[70,5181,5182],{"class":1301},"// vertical move, then resolve again\n",[70,5184,5185,5188,5190,5192,5194],{"class":72,"line":485},[70,5186,5187],{"class":80},"y.value ",[70,5189,3323],{"class":413},[70,5191,4145],{"class":80},[70,5193,3328],{"class":413},[70,5195,4135],{"class":80},[70,5197,5198,5201,5203],{"class":72,"line":496},[70,5199,5200],{"class":80},"onGround ",[70,5202,1323],{"class":413},[70,5204,4758],{"class":1311},[70,5206,5207,5209,5211,5213,5215,5217],{"class":72,"line":507},[70,5208,5072],{"class":413},[70,5210,3029],{"class":80},[70,5212,3266],{"class":283},[70,5214,5079],{"class":80},[70,5216,5082],{"class":413},[70,5218,5085],{"class":80},[70,5220,5221,5223,5225,5227],{"class":72,"line":518},[70,5222,4652],{"class":413},[70,5224,3029],{"class":80},[70,5226,5094],{"class":76},[70,5228,5097],{"class":80},[70,5230,5231,5233,5236,5238,5240],{"class":72,"line":525},[70,5232,4670],{"class":413},[70,5234,5235],{"class":80}," (vy ",[70,5237,1356],{"class":413},[70,5239,4580],{"class":1311},[70,5241,2994],{"class":80},[70,5243,5244],{"class":72,"line":536},[70,5245,5246],{"class":1301},"      // landed on top\n",[70,5248,5249,5252,5254,5257,5259],{"class":72,"line":547},[70,5250,5251],{"class":80},"      y.value ",[70,5253,1323],{"class":413},[70,5255,5256],{"class":80}," p.y ",[70,5258,77],{"class":413},[70,5260,5261],{"class":80}," ph\n",[70,5263,5264,5267,5269],{"class":72,"line":558},[70,5265,5266],{"class":80},"      onGround ",[70,5268,1323],{"class":413},[70,5270,2203],{"class":1311},[70,5272,5273,5276,5278],{"class":72,"line":567},[70,5274,5275],{"class":80},"      vy ",[70,5277,1323],{"class":413},[70,5279,2975],{"class":1311},[70,5281,5282,5285,5288,5290,5292,5294,5296],{"class":72,"line":572},[70,5283,5284],{"class":80},"    } ",[70,5286,5287],{"class":413},"else",[70,5289,5139],{"class":413},[70,5291,5235],{"class":80},[70,5293,3399],{"class":413},[70,5295,4580],{"class":1311},[70,5297,2994],{"class":80},[70,5299,5300],{"class":72,"line":577},[70,5301,5302],{"class":1301},"      // bonked your head\n",[70,5304,5305,5307,5309,5311,5313],{"class":72,"line":583},[70,5306,5251],{"class":80},[70,5308,1323],{"class":413},[70,5310,5256],{"class":80},[70,5312,4936],{"class":413},[70,5314,5315],{"class":80}," p.h\n",[70,5317,5318,5320,5322],{"class":72,"line":588},[70,5319,5275],{"class":80},[70,5321,1323],{"class":413},[70,5323,2975],{"class":1311},[70,5325,5326],{"class":72,"line":594},[70,5327,5328],{"class":80},"    }\n",[70,5330,5331],{"class":72,"line":599},[70,5332,378],{"class":80},[70,5334,5335],{"class":72,"line":605},[70,5336,384],{"class":80},[11,5338,5339,5340,5342],{},"Splitting the axes is what does the work. The same handful of lines makes \"slide along a wall while falling\" and \"land softly on a ledge\" both work. Corners and very fast movers need more care (resolution order matters, and the dt clamp earns its keep here), but per-axis is the clean backbone. Notice ",[67,5341,4719],{}," gets recomputed here every frame, the exact flag the jump code checks before letting you launch.",[38,5344,5346],{"id":5345},"sharp-saws-and-one-goal","Sharp Saws and One Goal!",[11,5348,5349],{},"Two things in the level aren't platforms: the spinning saw that hurts you and the goal you're trying to reach. They need collision too.",[11,5351,5352,5353,5356],{},"The saw is round, so treating it like a rectangle would feel wrong near the edges. Instead it uses ",[52,5354,5355],{},"circle vs box"," collision: you take the saw's center, clamp it to the player's rectangle to find the closest point, then check how far that point is from the center.",[59,5358,5360],{"className":3227,"code":5359,"language":3229,"meta":65,"style":65},"const r = SAW_RADIUS - 4 // slightly forgiving\n\nfor (const s of SAWS) {\n  // closest X on player box\n  const nx = Math.max(x.value, Math.min(s.x, x.value + pw))\n  // closest Y on player box\n  const ny = Math.max(y.value, Math.min(s.y, y.value + ph))\n\n  const dx = s.x - nx\n  const dy = s.y - ny\n\n  if (dx * dx + dy * dy \u003C r * r) {\n    emit('hit')\n    respawn()\n    return\n  }\n}\n",[67,5361,5362,5382,5386,5402,5407,5434,5439,5465,5469,5486,5503,5507,5535,5547,5554,5559,5563],{"__ignoreMap":65},[70,5363,5364,5366,5369,5371,5374,5376,5379],{"class":72,"line":73},[70,5365,3266],{"class":283},[70,5367,5368],{"class":80}," r ",[70,5370,1323],{"class":413},[70,5372,5373],{"class":80}," SAW_RADIUS ",[70,5375,77],{"class":413},[70,5377,5378],{"class":1311}," 4",[70,5380,5381],{"class":1301}," // slightly forgiving\n",[70,5383,5384],{"class":72,"line":160},[70,5385,164],{"emptyLinePlaceholder":163},[70,5387,5388,5390,5392,5394,5397,5399],{"class":72,"line":167},[70,5389,5072],{"class":413},[70,5391,3029],{"class":80},[70,5393,3266],{"class":283},[70,5395,5396],{"class":80}," s ",[70,5398,5082],{"class":413},[70,5400,5401],{"class":80}," SAWS) {\n",[70,5403,5404],{"class":72,"line":175},[70,5405,5406],{"class":1301},"  // closest X on player box\n",[70,5408,5409,5411,5414,5416,5418,5421,5424,5426,5429,5431],{"class":72,"line":183},[70,5410,2999],{"class":283},[70,5412,5413],{"class":80}," nx ",[70,5415,1323],{"class":413},[70,5417,4075],{"class":80},[70,5419,5420],{"class":76},"max",[70,5422,5423],{"class":80},"(x.value, Math.",[70,5425,4078],{"class":76},[70,5427,5428],{"class":80},"(s.x, x.value ",[70,5430,4936],{"class":413},[70,5432,5433],{"class":80}," pw))\n",[70,5435,5436],{"class":72,"line":191},[70,5437,5438],{"class":1301},"  // closest Y on player box\n",[70,5440,5441,5443,5446,5448,5450,5452,5455,5457,5460,5462],{"class":72,"line":340},[70,5442,2999],{"class":283},[70,5444,5445],{"class":80}," ny ",[70,5447,1323],{"class":413},[70,5449,4075],{"class":80},[70,5451,5420],{"class":76},[70,5453,5454],{"class":80},"(y.value, Math.",[70,5456,4078],{"class":76},[70,5458,5459],{"class":80},"(s.y, y.value ",[70,5461,4936],{"class":413},[70,5463,5464],{"class":80}," ph))\n",[70,5466,5467],{"class":72,"line":352},[70,5468,164],{"emptyLinePlaceholder":163},[70,5470,5471,5473,5476,5478,5481,5483],{"class":72,"line":364},[70,5472,2999],{"class":283},[70,5474,5475],{"class":80}," dx ",[70,5477,1323],{"class":413},[70,5479,5480],{"class":80}," s.x ",[70,5482,77],{"class":413},[70,5484,5485],{"class":80}," nx\n",[70,5487,5488,5490,5493,5495,5498,5500],{"class":72,"line":375},[70,5489,2999],{"class":283},[70,5491,5492],{"class":80}," dy ",[70,5494,1323],{"class":413},[70,5496,5497],{"class":80}," s.y ",[70,5499,77],{"class":413},[70,5501,5502],{"class":80}," ny\n",[70,5504,5505],{"class":72,"line":381},[70,5506,164],{"emptyLinePlaceholder":163},[70,5508,5509,5511,5514,5516,5518,5520,5522,5524,5526,5528,5530,5532],{"class":72,"line":474},[70,5510,4652],{"class":413},[70,5512,5513],{"class":80}," (dx ",[70,5515,3328],{"class":413},[70,5517,5475],{"class":80},[70,5519,4936],{"class":413},[70,5521,5492],{"class":80},[70,5523,3328],{"class":413},[70,5525,5492],{"class":80},[70,5527,3399],{"class":413},[70,5529,5368],{"class":80},[70,5531,3328],{"class":413},[70,5533,5534],{"class":80}," r) {\n",[70,5536,5537,5540,5542,5545],{"class":72,"line":480},[70,5538,5539],{"class":76},"    emit",[70,5541,2988],{"class":80},[70,5543,5544],{"class":419},"'hit'",[70,5546,3041],{"class":80},[70,5548,5549,5552],{"class":72,"line":485},[70,5550,5551],{"class":76},"    respawn",[70,5553,2832],{"class":80},[70,5555,5556],{"class":72,"line":496},[70,5557,5558],{"class":413},"    return\n",[70,5560,5561],{"class":72,"line":507},[70,5562,378],{"class":80},[70,5564,5565],{"class":72,"line":518},[70,5566,384],{"class":80},[11,5568,5569,5570,5573,5574,5577],{},"That ",[67,5571,5572],{},"dx*dx + dy*dy \u003C r*r"," is the whole trick. It avoids ",[67,5575,5576],{},"Math.sqrt"," entirely. You only care if you're inside the radius, not the exact distance.",[11,5579,5580],{},"The goal, a little flag, is simpler. It's just a rectangle, so it reuses the same overlap check as platforms:",[59,5582,5584],{"className":3227,"code":5583,"language":3229,"meta":65,"style":65},"if (overlaps(x.value, y.value, pw, ph, GOAL)) {\n  emit('win')\n}\n",[67,5585,5586,5597,5609],{"__ignoreMap":65},[70,5587,5588,5590,5592,5594],{"class":72,"line":73},[70,5589,4730],{"class":413},[70,5591,3029],{"class":80},[70,5593,5094],{"class":76},[70,5595,5596],{"class":80},"(x.value, y.value, pw, ph, GOAL)) {\n",[70,5598,5599,5602,5604,5607],{"class":72,"line":160},[70,5600,5601],{"class":76},"  emit",[70,5603,2988],{"class":80},[70,5605,5606],{"class":419},"'win'",[70,5608,3041],{"class":80},[70,5610,5611],{"class":72,"line":167},[70,5612,384],{"class":80},[11,5614,5615],{},"Both cases just emit events upward. The player doesn't “decide” anything. It only reports what happened. The actual game state lives one level above, in Vue reactivity:",[59,5617,5619],{"className":3227,"code":5618,"language":3229,"meta":65,"style":65},"const lives = ref(START_LIVES)\nconst won = ref(false)\n\nconst active = computed(() => !won.value)\n\nfunction onHit() {\n  lives.value -= 1\n  if (lives.value \u003C= 0) lives.value = START_LIVES\n}\n\nfunction onWin() {\n  won.value = true\n}\n",[67,5620,5621,5635,5652,5656,5678,5682,5691,5702,5722,5726,5730,5739,5748],{"__ignoreMap":65},[70,5622,5623,5625,5628,5630,5632],{"class":72,"line":73},[70,5624,3266],{"class":283},[70,5626,5627],{"class":80}," lives ",[70,5629,1323],{"class":413},[70,5631,3274],{"class":76},[70,5633,5634],{"class":80},"(START_LIVES)\n",[70,5636,5637,5639,5642,5644,5646,5648,5650],{"class":72,"line":160},[70,5638,3266],{"class":283},[70,5640,5641],{"class":80}," won ",[70,5643,1323],{"class":413},[70,5645,3274],{"class":76},[70,5647,2988],{"class":80},[70,5649,4708],{"class":1311},[70,5651,3041],{"class":80},[70,5653,5654],{"class":72,"line":167},[70,5655,164],{"emptyLinePlaceholder":163},[70,5657,5658,5660,5663,5665,5668,5670,5672,5675],{"class":72,"line":175},[70,5659,3266],{"class":283},[70,5661,5662],{"class":80}," active ",[70,5664,1323],{"class":413},[70,5666,5667],{"class":76}," computed",[70,5669,4348],{"class":80},[70,5671,3312],{"class":283},[70,5673,5674],{"class":413}," !",[70,5676,5677],{"class":80},"won.value)\n",[70,5679,5680],{"class":72,"line":183},[70,5681,164],{"emptyLinePlaceholder":163},[70,5683,5684,5686,5689],{"class":72,"line":191},[70,5685,2818],{"class":283},[70,5687,5688],{"class":76}," onHit",[70,5690,2824],{"class":80},[70,5692,5693,5696,5699],{"class":72,"line":340},[70,5694,5695],{"class":80},"  lives.value ",[70,5697,5698],{"class":413},"-=",[70,5700,5701],{"class":1311}," 1\n",[70,5703,5704,5706,5709,5712,5714,5717,5719],{"class":72,"line":352},[70,5705,4652],{"class":413},[70,5707,5708],{"class":80}," (lives.value ",[70,5710,5711],{"class":413},"\u003C=",[70,5713,4580],{"class":1311},[70,5715,5716],{"class":80},") lives.value ",[70,5718,1323],{"class":413},[70,5720,5721],{"class":80}," START_LIVES\n",[70,5723,5724],{"class":72,"line":364},[70,5725,384],{"class":80},[70,5727,5728],{"class":72,"line":375},[70,5729,164],{"emptyLinePlaceholder":163},[70,5731,5732,5734,5737],{"class":72,"line":381},[70,5733,2818],{"class":283},[70,5735,5736],{"class":76}," onWin",[70,5738,2824],{"class":80},[70,5740,5741,5744,5746],{"class":72,"line":474},[70,5742,5743],{"class":80},"  won.value ",[70,5745,1323],{"class":413},[70,5747,2203],{"class":1311},[70,5749,5750],{"class":72,"line":480},[70,5751,384],{"class":80},[11,5753,5754,5757,5758,5761,5762,5765,5766,1130],{},[67,5755,5756],{},"respawn()"," stays inside the player, where it resets position and velocity. ",[67,5759,5760],{},"onHit"," just adjusts lives. Simple separation: the player handles ",[256,5763,5764],{},"where you are",", the world handles ",[256,5767,5768],{},"what that means",[11,5770,5771,5772,5775],{},"The important line here is ",[67,5773,5774],{},"active",". It flows straight into the player:",[59,5777,5779],{"className":3227,"code":5778,"language":3229,"meta":65,"style":65},"if (!props.active) return\n",[67,5780,5781],{"__ignoreMap":65},[70,5782,5783,5785,5787,5789,5792],{"class":72,"line":73},[70,5784,4730],{"class":413},[70,5786,3029],{"class":80},[70,5788,4675],{"class":413},[70,5790,5791],{"class":80},"props.active) ",[70,5793,5794],{"class":413},"return\n",[11,5796,5797,5798,5801,5802,5804],{},"So the moment ",[67,5799,5800],{},"won"," flips to ",[67,5803,4712],{},", the entire simulation stops updating. No more physics, no more movement, just a frozen world.",[11,5806,5807,5808,5811,5812,5814],{},"And the HUD is just another Vue component reacting to the same state. ",[67,5809,5810],{},"lives"," drives the hearts, ",[67,5813,5800],{}," drives the victory screen.",[11,5816,5817],{},"At this point, the whole game is just state flowing through components, and a loop deciding when that state gets updated.",[38,5819,5821],{"id":5820},"from-start-to-game-over","From Start to Game Over",[11,5823,5824],{},"Here's everything above in the order it actually happens inside a single tick of the loop:",[5826,5827,5828,5841,5855,5863,5869,5877,5889],"ol",{},[126,5829,5830,5833,5834,5837,5838,5840],{},[52,5831,5832],{},"Read input."," Check which keys are currently in the ",[67,5835,5836],{},"keys"," set, and whether ",[67,5839,4780],{}," was armed.",[126,5842,5843,775,5846,974,5848,5850,5851,5854],{},[52,5844,5845],{},"Jump.",[67,5847,4780],{},[67,5849,4719],{}," are true, set ",[67,5852,5853],{},"vy = jump"," and consume the flag.",[126,5856,5857,954,5860,1130],{},[52,5858,5859],{},"Apply gravity.",[67,5861,5862],{},"vy += gravity * dt",[126,5864,5865,5868],{},[52,5866,5867],{},"Move + resolve X."," Apply horizontal velocity, then push out of any wall collisions.",[126,5870,5871,5874,5875,1130],{},[52,5872,5873],{},"Move + resolve Y."," Apply vertical velocity, then snap to floors or ceilings, and recompute ",[67,5876,4719],{},[126,5878,5879,5882,5883,3803,5886,1130],{},[52,5880,5881],{},"Check the world."," Did we hit a saw, fall into a pit, or reach the goal? Emit ",[67,5884,5885],{},"hit",[67,5887,5888],{},"win",[126,5890,5891,5894],{},[52,5892,5893],{},"Render."," Pixi draws the updated scene, and the loop repeats.",[11,5896,5897,5898,5900,5901,5903,5904,5906],{},"Steps 1–6 are everything inside ",[67,5899,3219],{},". Step 7 is automatic: you're only mutating reactive ",[67,5902,2747],{},"s, and ",[67,5905,3212],{}," turns that into a redraw, just like Vue re-renders a template when state changes.",[38,5908,2337],{"id":2336},[11,5910,5911,5912,5914,5915,5918],{},"That's the entire platformer: a loop, a few ",[67,5913,2747],{},"s, and a lot of adding numbers. The blue box can now jump over platforms, avoid blades and reach the flag. Under the hood it's just ",[67,5916,5917],{},"vy += 0.55",", a rectangle overlap test, and Vue's reactivity doing what it does best. Suddenly this doesn't feel too alien, right? Let me tell you: if you were able to ship that dashboard or build that crazy data table, you already have what it takes to build a game!",[11,5920,5921,5922,4675],{},"Did you learn something new? Did you build a game? ",[46,5923,5926],{"href":5924,"rel":5925},"https://x.com/nicodevs",[116],"Let me know",[11,5928,2361],{},[1013,5930,5931],{},"html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html pre.shiki code .sW0Xf, html code.shiki .sW0Xf{--shiki-default:#FD971F;--shiki-default-font-style:italic}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .soZtE, html code.shiki .soZtE{--shiki-default:#A6E22E;--shiki-default-text-decoration:underline}",{"title":65,"searchDepth":160,"depth":160,"links":5933},[5934,5935,5936,5937,5938,5939,5945,5946,5947,5948],{"id":2765,"depth":160,"text":2766},{"id":2799,"depth":160,"text":2800},{"id":2915,"depth":160,"text":2916},{"id":3143,"depth":160,"text":3144},{"id":3196,"depth":160,"text":3197},{"id":3370,"depth":160,"text":3371,"children":5940},[5941,5942,5943,5944],{"id":3822,"depth":167,"text":3823},{"id":3845,"depth":167,"text":3846},{"id":3999,"depth":167,"text":4000},{"id":4220,"depth":167,"text":4221},{"id":4784,"depth":160,"text":4785},{"id":5345,"depth":160,"text":5346},{"id":5820,"depth":160,"text":5821},{"id":2336,"depth":160,"text":2337},"Vue","2026-06-26","Can I build a platformer game using Vue? Can my Vue skills help me in my game dev journey? Luckily, the answer to both questions is yes.","/img/blog/building-a-platformer-game-with-vue-and-pixijs.png",{},"/blog/building-a-platformer-game-with-vue-and-pixijs",{"title":2711,"description":5951},"blog/building-a-platformer-game-with-vue-and-pixijs","D0RgoTGCh65wb0I_whdMtWDTz1vvyoFa79SVGMqreVs",{"id":5959,"title":5960,"body":5961,"category":6659,"date":6660,"description":6661,"draft":1028,"extension":64,"image":6662,"meta":6663,"navigation":163,"path":6664,"seo":6665,"stem":6666,"tighten":1028,"__hash__":6667},"blog/blog/run-multiple-node-js-apps-on-one-server-with-pm2.md","Run Multiple Node.js Apps on One Server with PM2",{"type":8,"value":5962,"toc":6651},[5963,5966,5973,5980,5986,5993,6004,6007,6011,6017,6038,6049,6064,6070,6073,6085,6088,6094,6097,6109,6112,6118,6122,6125,6140,6151,6171,6178,6182,6185,6202,6205,6408,6411,6425,6428,6460,6463,6467,6474,6490,6497,6567,6570,6573,6577,6580,6585,6588,6591,6603,6606,6609,6621,6624,6627,6634,6636,6639,6642,6645,6648],[11,5964,5965],{},"I love static sites and serverless functions. With those two, you can build just about anything.",[11,5967,5968,5969,5972],{},"That said, sometimes you need the full power of ",[52,5970,5971],{},"a server running on your own infrastructure."," Maybe you need to run long-lived processes, heavy background jobs, or just host your own apps and services without the constraints of serverless functions.",[11,5974,5975,5976,5979],{},"The challenge starts once you have ",[52,5977,5978],{},"multiple applications"," running on the same server, each with its own Node process. How do you keep them running 24/7? How do you make sure they restart if they crash? How do you manage all of them without turning your server into a mess?",[11,5981,3205,5982,5985],{},[52,5983,5984],{},"PM2"," comes in.",[11,5987,5988,5989,5992],{},"PM2 is a ",[52,5990,5991],{},"process manager for Node.js"," that makes it easy to run and manage multiple applications. From simple scripts to full-stack Nuxt apps, PM2 helps you orchestrate them and:",[123,5994,5995,5998,6001],{},[126,5996,5997],{},"Monitor and control uptime and memory usage,",[126,5999,6000],{},"Automatically restart them if they crash,",[126,6002,6003],{},"Check out errors and logs",[11,6005,6006],{},"... and more. Let's check it out.",[38,6008,6010],{"id":6009},"installing-pm2","Installing PM2",[11,6012,6013,6014],{},"Installing PM2 is as simple as installing any other global ",[52,6015,6016],{},"npm package:",[59,6018,6022],{"className":6019,"code":6020,"language":6021,"meta":65,"style":65},"language-bash shiki shiki-themes monokai","npm install -g pm2\n","bash",[67,6023,6024],{"__ignoreMap":65},[70,6025,6026,6029,6032,6035],{"class":72,"line":73},[70,6027,6028],{"class":76},"npm",[70,6030,6031],{"class":419}," install",[70,6033,6034],{"class":1311}," -g",[70,6036,6037],{"class":419}," pm2\n",[11,6039,6040,6041,6044,6045,6048],{},"Once installed, run it with ",[67,6042,6043],{},"pm2",". Let's start with the simplest possible example. Imagine you have a file called ",[67,6046,6047],{},"index.js",", you can kickstart it with:",[59,6050,6052],{"className":6019,"code":6051,"language":6021,"meta":65,"style":65},"pm2 start index.js\n",[67,6053,6054],{"__ignoreMap":65},[70,6055,6056,6058,6061],{"class":72,"line":73},[70,6057,6043],{"class":76},[70,6059,6060],{"class":419}," start",[70,6062,6063],{"class":419}," index.js\n",[11,6065,6066,6069],{},[52,6067,6068],{},"That's it."," PM2 will start the process, keep it running, and automatically restart it if it crashes.",[11,6071,6072],{},"You can check all running processes at any time with:",[59,6074,6076],{"className":6019,"code":6075,"language":6021,"meta":65,"style":65},"pm2 list\n",[67,6077,6078],{"__ignoreMap":65},[70,6079,6080,6082],{"class":72,"line":73},[70,6081,6043],{"class":76},[70,6083,6084],{"class":419}," list\n",[11,6086,6087],{},"Here's what you'll get:",[59,6089,6092],{"className":6090,"code":6091,"language":1282},[1280],"┌────┬─────────┬─────────┬─────────┬──────────┬──────────┐\n│ id │ name    │ status  │ restart │ uptime   │ memory   │\n├────┼─────────┼─────────┼─────────┼──────────┼──────────┤\n│ 0  │ index   │ online  │ 0       │ 2m       │ 41.8mb   │\n└────┴─────────┴─────────┴─────────┴──────────┴──────────┘\n",[67,6093,6091],{"__ignoreMap":65},[11,6095,6096],{},"And if you want to see the logs:",[59,6098,6100],{"className":6019,"code":6099,"language":6021,"meta":65,"style":65},"pm2 logs\n",[67,6101,6102],{"__ignoreMap":65},[70,6103,6104,6106],{"class":72,"line":73},[70,6105,6043],{"class":76},[70,6107,6108],{"class":419}," logs\n",[11,6110,6111],{},"... will show you something like:",[59,6113,6116],{"className":6114,"code":6115,"language":1282},[1280],"[TAILING] Tailing last 15 lines for [index] process (change the value with --lines option)\n\n0|index | Server listening on http://localhost:3000\n0|index | GET /         200  9ms\n0|index | GET /health   200  1ms\n",[67,6117,6115],{"__ignoreMap":65},[38,6119,6121],{"id":6120},"running-a-nuxt-application","Running a Nuxt Application",[11,6123,6124],{},"Running a Nuxt application is just as straightforward. First, build your project:",[59,6126,6128],{"className":6019,"code":6127,"language":6021,"meta":65,"style":65},"npm run build\n",[67,6129,6130],{"__ignoreMap":65},[70,6131,6132,6134,6137],{"class":72,"line":73},[70,6133,6028],{"class":76},[70,6135,6136],{"class":419}," run",[70,6138,6139],{"class":419}," build\n",[11,6141,6142,6143,6146,6147,6150],{},"The build produces a ",[67,6144,6145],{},".output"," folder with a self-contained Node server inside it, at ",[67,6148,6149],{},".output/server/index.mjs",". Instead of running that file directly, hand it to PM2:",[59,6152,6154],{"className":6019,"code":6153,"language":6021,"meta":65,"style":65},"pm2 start .output/server/index.mjs --name my-nuxt-app\n",[67,6155,6156],{"__ignoreMap":65},[70,6157,6158,6160,6162,6165,6168],{"class":72,"line":73},[70,6159,6043],{"class":76},[70,6161,6060],{"class":419},[70,6163,6164],{"class":419}," .output/server/index.mjs",[70,6166,6167],{"class":1311}," --name",[70,6169,6170],{"class":419}," my-nuxt-app\n",[11,6172,6173,6174,6177],{},"PM2 will launch the ",[256,6175,6176],{},"exact same"," production server you'd get by running that file yourself, but now it will monitor the process, restart it if it crashes, and let you manage it alongside any other applications running on the server.",[38,6179,6181],{"id":6180},"the-ecosystem-file","The Ecosystem File",[11,6183,6184],{},"Once you start running more than a handful of applications, managing everything through individual PM2 commands can become a bit cumbersome. Starting each process one by one, remembering which port it uses, and keeping track of its configuration doesn't scale very well.",[11,6186,6187,6188,6191,6192,6194,6195,6197,6198,6201],{},"A much better approach is to define everything in a single ",[52,6189,6190],{},"ecosystem file",". It's a plain JavaScript config where you describe every application you want PM2 to manage: its ",[67,6193,414],{},", the ",[67,6196,2051],{}," to run, its working directory (",[67,6199,6200],{},"cwd","), environment variables, ports, log files, restart policy, and any other setting you need.",[11,6203,6204],{},"For example:",[59,6206,6209],{"className":2809,"code":6207,"filename":6208,"language":2811,"meta":65,"style":65},"module.exports = {\n  apps: [\n    {\n      name: \"web-app\",\n      cwd: \"/var/www/web-app\",\n      script: \"index.js\",\n      env: {\n        PORT: 3000,\n      },\n    },\n    {\n      name: \"my-nuxt-app\",\n      cwd: \"/var/www/my-nuxt-app\",\n      script: \".output/server/index.mjs\",\n      env: {\n        PORT: 3001,\n      },\n    },\n    {\n      name: \"email-worker\",\n      cwd: \"/var/www/email-worker\",\n      script: \"worker.js\",\n      error_file: \"./logs/error.log\",\n      out_file: \"./logs/output.log\",\n    },\n  ],\n};\n","ecosystem.config.js",[67,6210,6211,6226,6231,6236,6246,6256,6266,6271,6281,6286,6291,6295,6304,6313,6322,6326,6335,6339,6343,6347,6356,6365,6374,6384,6394,6398,6403],{"__ignoreMap":65},[70,6212,6213,6216,6218,6221,6224],{"class":72,"line":73},[70,6214,6215],{"class":283},"module",[70,6217,1130],{"class":80},[70,6219,6220],{"class":283},"exports",[70,6222,6223],{"class":413}," =",[70,6225,3315],{"class":80},[70,6227,6228],{"class":72,"line":160},[70,6229,6230],{"class":80},"  apps: [\n",[70,6232,6233],{"class":72,"line":167},[70,6234,6235],{"class":80},"    {\n",[70,6237,6238,6241,6244],{"class":72,"line":175},[70,6239,6240],{"class":80},"      name: ",[70,6242,6243],{"class":419},"\"web-app\"",[70,6245,294],{"class":80},[70,6247,6248,6251,6254],{"class":72,"line":183},[70,6249,6250],{"class":80},"      cwd: ",[70,6252,6253],{"class":419},"\"/var/www/web-app\"",[70,6255,294],{"class":80},[70,6257,6258,6261,6264],{"class":72,"line":191},[70,6259,6260],{"class":80},"      script: ",[70,6262,6263],{"class":419},"\"index.js\"",[70,6265,294],{"class":80},[70,6267,6268],{"class":72,"line":340},[70,6269,6270],{"class":80},"      env: {\n",[70,6272,6273,6276,6279],{"class":72,"line":352},[70,6274,6275],{"class":80},"        PORT: ",[70,6277,6278],{"class":1311},"3000",[70,6280,294],{"class":80},[70,6282,6283],{"class":72,"line":364},[70,6284,6285],{"class":80},"      },\n",[70,6287,6288],{"class":72,"line":375},[70,6289,6290],{"class":80},"    },\n",[70,6292,6293],{"class":72,"line":381},[70,6294,6235],{"class":80},[70,6296,6297,6299,6302],{"class":72,"line":474},[70,6298,6240],{"class":80},[70,6300,6301],{"class":419},"\"my-nuxt-app\"",[70,6303,294],{"class":80},[70,6305,6306,6308,6311],{"class":72,"line":480},[70,6307,6250],{"class":80},[70,6309,6310],{"class":419},"\"/var/www/my-nuxt-app\"",[70,6312,294],{"class":80},[70,6314,6315,6317,6320],{"class":72,"line":485},[70,6316,6260],{"class":80},[70,6318,6319],{"class":419},"\".output/server/index.mjs\"",[70,6321,294],{"class":80},[70,6323,6324],{"class":72,"line":496},[70,6325,6270],{"class":80},[70,6327,6328,6330,6333],{"class":72,"line":507},[70,6329,6275],{"class":80},[70,6331,6332],{"class":1311},"3001",[70,6334,294],{"class":80},[70,6336,6337],{"class":72,"line":518},[70,6338,6285],{"class":80},[70,6340,6341],{"class":72,"line":525},[70,6342,6290],{"class":80},[70,6344,6345],{"class":72,"line":536},[70,6346,6235],{"class":80},[70,6348,6349,6351,6354],{"class":72,"line":547},[70,6350,6240],{"class":80},[70,6352,6353],{"class":419},"\"email-worker\"",[70,6355,294],{"class":80},[70,6357,6358,6360,6363],{"class":72,"line":558},[70,6359,6250],{"class":80},[70,6361,6362],{"class":419},"\"/var/www/email-worker\"",[70,6364,294],{"class":80},[70,6366,6367,6369,6372],{"class":72,"line":567},[70,6368,6260],{"class":80},[70,6370,6371],{"class":419},"\"worker.js\"",[70,6373,294],{"class":80},[70,6375,6376,6379,6382],{"class":72,"line":572},[70,6377,6378],{"class":80},"      error_file: ",[70,6380,6381],{"class":419},"\"./logs/error.log\"",[70,6383,294],{"class":80},[70,6385,6386,6389,6392],{"class":72,"line":577},[70,6387,6388],{"class":80},"      out_file: ",[70,6390,6391],{"class":419},"\"./logs/output.log\"",[70,6393,294],{"class":80},[70,6395,6396],{"class":72,"line":583},[70,6397,6290],{"class":80},[70,6399,6400],{"class":72,"line":588},[70,6401,6402],{"class":80},"  ],\n",[70,6404,6405],{"class":72,"line":594},[70,6406,6407],{"class":80},"};\n",[11,6409,6410],{},"Once you have your ecosystem file, starting every application is just a single command:",[59,6412,6414],{"className":6019,"code":6413,"language":6021,"meta":65,"style":65},"pm2 start ecosystem.config.js\n",[67,6415,6416],{"__ignoreMap":65},[70,6417,6418,6420,6422],{"class":72,"line":73},[70,6419,6043],{"class":76},[70,6421,6060],{"class":419},[70,6423,6424],{"class":419}," ecosystem.config.js\n",[11,6426,6427],{},"You can also restart, stop, or delete the entire group just as easily:",[59,6429,6431],{"className":6019,"code":6430,"language":6021,"meta":65,"style":65},"pm2 restart ecosystem.config.js\npm2 stop ecosystem.config.js\npm2 delete ecosystem.config.js\n",[67,6432,6433,6442,6451],{"__ignoreMap":65},[70,6434,6435,6437,6440],{"class":72,"line":73},[70,6436,6043],{"class":76},[70,6438,6439],{"class":419}," restart",[70,6441,6424],{"class":419},[70,6443,6444,6446,6449],{"class":72,"line":160},[70,6445,6043],{"class":76},[70,6447,6448],{"class":419}," stop",[70,6450,6424],{"class":419},[70,6452,6453,6455,6458],{"class":72,"line":167},[70,6454,6043],{"class":76},[70,6456,6457],{"class":419}," delete",[70,6459,6424],{"class":419},[11,6461,6462],{},"With that in place, your entire stack can be managed from a single configuration file instead of dozens of individual commands. It also makes your server configuration reproducible, easy to version control, and much easier to maintain as your infrastructure grows.",[38,6464,6466],{"id":6465},"reverse-proxies","Reverse Proxies",[11,6468,6469,6470,3803,6472,1130],{},"If you have multiple Nuxt apps, each one runs on a different port, like ",[67,6471,6278],{},[67,6473,6332],{},[11,6475,6476,6477,6480,6481,6483,6484,6487,6488,2926],{},"So how does one server know that ",[67,6478,6479],{},"marketing.com"," should go to the app on port ",[67,6482,6278],{},", while ",[67,6485,6486],{},"dashboard.com"," goes to the one on port ",[67,6489,6332],{},[11,6491,6492,6493,6496],{},"That's the job of a ",[52,6494,6495],{},"reverse proxy",". A web server like Nginx sits in front of your apps, reads the domain of each incoming request, and forwards it to the right local port. A minimal configuration for a single site looks like this:",[59,6498,6503],{"className":6499,"code":6500,"filename":6501,"language":6502,"meta":65,"style":65},"language-nginx shiki shiki-themes monokai","server {\n  listen 80;\n  server_name marketing.com;\n\n  location / {\n    proxy_pass http://localhost:3000;\n    proxy_set_header Host $host;\n  }\n}\n","/etc/nginx/sites-available/marketing","nginx",[67,6504,6505,6512,6523,6531,6535,6543,6551,6559,6563],{"__ignoreMap":65},[70,6506,6507,6510],{"class":72,"line":73},[70,6508,6509],{"class":283},"server",[70,6511,3315],{"class":80},[70,6513,6514,6517,6520],{"class":72,"line":160},[70,6515,6516],{"class":413},"  listen ",[70,6518,6519],{"class":1311},"80",[70,6521,6522],{"class":80},";\n",[70,6524,6525,6528],{"class":72,"line":167},[70,6526,6527],{"class":413},"  server_name ",[70,6529,6530],{"class":80},"marketing.com;\n",[70,6532,6533],{"class":72,"line":175},[70,6534,164],{"emptyLinePlaceholder":163},[70,6536,6537,6540],{"class":72,"line":183},[70,6538,6539],{"class":283},"  location",[70,6541,6542],{"class":80}," / {\n",[70,6544,6545,6548],{"class":72,"line":191},[70,6546,6547],{"class":413},"    proxy_pass ",[70,6549,6550],{"class":80},"http://localhost:3000;\n",[70,6552,6553,6556],{"class":72,"line":340},[70,6554,6555],{"class":413},"    proxy_set_header ",[70,6557,6558],{"class":80},"Host $host;\n",[70,6560,6561],{"class":72,"line":352},[70,6562,378],{"class":80},[70,6564,6565],{"class":72,"line":364},[70,6566,384],{"class":80},[11,6568,6569],{},"You write one of these blocks per domain, each pointing at the port of its app, and Nginx takes care of the routing from there.",[11,6571,6572],{},"Configuring Nginx from scratch (and adding HTTPS with something like Let's Encrypt) is a topic of its own, but this is the piece that connects your PM2 processes to the outside world.",[38,6574,6576],{"id":6575},"surviving-a-server-reboot","Surviving a Server Reboot",[11,6578,6579],{},"At this point, your applications are running under PM2, but there's still one important problem left to solve. You might be wondering:",[15,6581,6582],{},[11,6583,6584],{},"What happens if the server reboots?",[11,6586,6587],{},"By default, PM2 won't automatically restore your applications after a system restart. Fortunately, enabling that behavior only takes a couple of commands.",[11,6589,6590],{},"First, save the list of applications that are currently running:",[59,6592,6594],{"className":6019,"code":6593,"language":6021,"meta":65,"style":65},"pm2 save\n",[67,6595,6596],{"__ignoreMap":65},[70,6597,6598,6600],{"class":72,"line":73},[70,6599,6043],{"class":76},[70,6601,6602],{"class":419}," save\n",[11,6604,6605],{},"This creates a snapshot of your current processes, including everything defined in your ecosystem file.",[11,6607,6608],{},"Next, tell your operating system to start PM2 automatically during boot:",[59,6610,6612],{"className":6019,"code":6611,"language":6021,"meta":65,"style":65},"pm2 startup\n",[67,6613,6614],{"__ignoreMap":65},[70,6615,6616,6618],{"class":72,"line":73},[70,6617,6043],{"class":76},[70,6619,6620],{"class":419}," startup\n",[11,6622,6623],{},"PM2 will detect your operating system and print a command to the terminal. Simply copy and run that command once. It registers PM2 as a system service so it starts automatically whenever the server boots.",[11,6625,6626],{},"From that point on, every time your VPS restarts, PM2 will start automatically and restore all the processes you previously saved.",[11,6628,6629,6630,6633],{},"It's a small step, and one of the easiest to forget. It's also one of the ",[256,6631,6632],{},"most important",", since it's what lets your applications come back on their own after a reboot, with no manual intervention.",[38,6635,2337],{"id":2336},[11,6637,6638],{},"PM2 is one of those tools you can learn in an afternoon and keep using for years.",[11,6640,6641],{},"If you're hosting your own Node.js applications, it solves a surprising number of problems: it keeps your processes alive, manages multiple services at once, organizes your infrastructure into a single ecosystem file, and brings everything back online after a server reboot.",[11,6643,6644],{},"The best part is that, once it's set up, it doesn't demand much attention. It quietly does its job while you focus on building your applications instead of worrying about whether they'll still be running tomorrow.",[11,6646,6647],{},"If you give it a try on your own server, I'd like to hear how it goes!",[1013,6649,6650],{},"html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}",{"title":65,"searchDepth":160,"depth":160,"links":6652},[6653,6654,6655,6656,6657,6658],{"id":6009,"depth":160,"text":6010},{"id":6120,"depth":160,"text":6121},{"id":6180,"depth":160,"text":6181},{"id":6465,"depth":160,"text":6466},{"id":6575,"depth":160,"text":6576},{"id":2336,"depth":160,"text":2337},"DevOps","2026-03-11","Learn how to use PM2 to run, monitor, and manage multiple Node.js applications on your own server.","/img/blog/run-multiple-node-js-apps-on-one-server-with-pm2.png",{},"/blog/run-multiple-node-js-apps-on-one-server-with-pm2",{"title":5960,"description":6661},"blog/run-multiple-node-js-apps-on-one-server-with-pm2","X7HnEUTWfdh1oKnG3Ioqh-XwHS9at1WA4DJbFIyMjcs",[6669,8047],{"id":6670,"title":6671,"body":6672,"category":6659,"date":8039,"description":8040,"draft":1028,"extension":64,"image":8041,"meta":8042,"navigation":163,"path":8043,"seo":8044,"stem":8045,"tighten":1028,"__hash__":8046},"blog/blog/automatically-deploy-your-nuxt-static-site-to-digitalocean-with-github-actions.md","Automatically Deploy Your Nuxt Static Site to DigitalOcean with GitHub Actions",{"type":8,"value":6673,"toc":8022},[6674,6681,6684,6693,6707,6713,6729,6733,6744,6751,6758,7106,7110,7113,7117,7158,7164,7168,7193,7211,7215,7247,7258,7262,7303,7309,7319,7323,7347,7357,7363,7374,7383,7389,7402,7406,7439,7457,7461,7464,7497,7511,7515,7518,7543,7558,7561,7571,7574,7579,7601,7616,7620,7633,7636,7652,7656,7684,7688,7733,7739,7781,7784,7820,7824,7830,7863,7877,7944,7947,7951,7970,7974,7977,7999,8003,8009,8012,8019],[11,6675,6676,6677,6680],{},"Auto-deploy is one of the great features of Netlify and Vercel. Whenever you push to ",[67,6678,6679],{},"main","... done! Your site builds automatically. I love that, but I prefer to manage my own server.",[11,6682,6683],{},"I mean, those platforms are great, but I don't want to worry about surpassing the free tier usage and receiving a big bill just for hosting my static site. If I suddenly have tons of traffic, it's most likely a random DDoS instead of one of my posts going viral (prove me wrong by sharing the post if you like it!).",[11,6685,6686,6687,6690,6691,1130],{},"So, how can we setup a similar auto-deploy on a virtual private server? Well, we can use ",[52,6688,6689],{},"GitHub Actions:"," a powerful way to automate development workflows. Today we'll create a workflow that will build our site and copy it into the production server, on any push to ",[67,6692,6679],{},[11,6694,1213,6695,6698,6699,6702,6703,6706],{},[256,6696,6697],{},"best"," part? The web server won't have to run ",[67,6700,6701],{},"npm install"," nor host the ",[67,6704,6705],{},"node_modules"," folder. It will receive the static site, already generated. So, just a few MB of HTML, JavaScript, and CSS.",[11,6708,1213,6709,6712],{},[256,6710,6711],{},"best best"," part? We can run up to 1,000 minutes of GitHub Actions per month for free, which is way, way more than we need to deploy a static site that changes, at most, once per day.",[11,6714,6715,6716,6719,6720,3791,6722,3791,6725,6728],{},"In this guide, I'll walk you through exactly how to do it, step by step. We'll use ",[52,6717,6718],{},"Nuxt",", but you can adapt the code for ",[52,6721,5949],{},[52,6723,6724],{},"Astro",[52,6726,6727],{},"React",", or any other framework that creates a static site or SPA.",[38,6730,6732],{"id":6731},"the-workflow-file","The Workflow File",[11,6734,6735,6736,6739,6740,6743],{},"Setting up a GitHub action is quite straightforward. We need to create a ",[67,6737,6738],{},".github"," directory in the root of our repository. Inside, we'll have a ",[67,6741,6742],{},"workflows"," directory, where we'll store YAML files with the workflow configuration.",[11,6745,6746,6747,6750],{},"For our goal, we'll only need one workflow. So, in ",[67,6748,6749],{},".github/workflows/deploy.yaml",", you can store the following content. We'll explore what each of these sections means throughout this article.",[11,6752,6753,6754,6757],{},"For now, just know that in our case, the static website is located in the ",[67,6755,6756],{},"/var/www/project/website"," folder on the server. You can adjust this workflow to match the correct directory for your server.",[59,6759,6763],{"className":6760,"code":6761,"language":6762,"meta":65,"style":65},"language-yaml shiki shiki-themes monokai","name: Deploy to DigitalOcean\n\non:\n    push:\n        branches:\n            - main\n\njobs:\n    deploy:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Checkout Code\n              uses: actions/checkout@v4\n\n            - name: Setup Node.js\n              uses: actions/setup-node@v4\n              with:\n                  node-version: '22'\n\n            - name: Create .env File\n              run: echo \"${{ secrets.ENV }}\" > .env\n\n            - name: Install Dependencies and Build\n              run: |\n                  npm install\n                  npm run generate\n\n            - name: Compress Build Folder\n              run: |\n                  cd ./.output\n                  tar -czvf build.tar.gz ./public\n\n            - name: Copy to Server\n              run: |\n                  cd ./.output\n                  echo \"${{ secrets.SSH_PRIVATE_KEY }}\" > id_rsa\n                  chmod 600 id_rsa\n                  scp -o StrictHostKeyChecking=no -i id_rsa build.tar.gz ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }}:/var/www/project/build.tar.gz\n\n            - name: Extract Build Folder On Server\n              run: |\n                  cd ./.output\n                  ssh -i id_rsa -o StrictHostKeyChecking=no ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }} \u003C\u003C 'EOF'\n                  cd /var/www/project\n                  tar -xzvf build.tar.gz\n                  rm build.tar.gz\n                  mv website website_old\n                  mv public website\n                  rm -rf website_old\n                  EOF\n","yaml",[67,6764,6765,6774,6778,6786,6793,6800,6808,6812,6819,6826,6836,6843,6854,6864,6868,6879,6888,6895,6905,6909,6920,6930,6934,6945,6954,6959,6964,6968,6979,6987,6992,6997,7001,7012,7020,7024,7029,7034,7039,7043,7054,7062,7066,7071,7076,7081,7086,7091,7096,7101],{"__ignoreMap":65},[70,6766,6767,6769,6771],{"class":72,"line":73},[70,6768,414],{"class":413},[70,6770,287],{"class":80},[70,6772,6773],{"class":419},"Deploy to DigitalOcean\n",[70,6775,6776],{"class":72,"line":160},[70,6777,164],{"emptyLinePlaceholder":163},[70,6779,6780,6783],{"class":72,"line":167},[70,6781,6782],{"class":1311},"on",[70,6784,6785],{"class":80},":\n",[70,6787,6788,6791],{"class":72,"line":175},[70,6789,6790],{"class":413},"    push",[70,6792,6785],{"class":80},[70,6794,6795,6798],{"class":72,"line":183},[70,6796,6797],{"class":413},"        branches",[70,6799,6785],{"class":80},[70,6801,6802,6805],{"class":72,"line":191},[70,6803,6804],{"class":80},"            - ",[70,6806,6807],{"class":419},"main\n",[70,6809,6810],{"class":72,"line":340},[70,6811,164],{"emptyLinePlaceholder":163},[70,6813,6814,6817],{"class":72,"line":352},[70,6815,6816],{"class":413},"jobs",[70,6818,6785],{"class":80},[70,6820,6821,6824],{"class":72,"line":364},[70,6822,6823],{"class":413},"    deploy",[70,6825,6785],{"class":80},[70,6827,6828,6831,6833],{"class":72,"line":375},[70,6829,6830],{"class":413},"        runs-on",[70,6832,287],{"class":80},[70,6834,6835],{"class":419},"ubuntu-latest\n",[70,6837,6838,6841],{"class":72,"line":381},[70,6839,6840],{"class":413},"        steps",[70,6842,6785],{"class":80},[70,6844,6845,6847,6849,6851],{"class":72,"line":474},[70,6846,6804],{"class":80},[70,6848,414],{"class":413},[70,6850,287],{"class":80},[70,6852,6853],{"class":419},"Checkout Code\n",[70,6855,6856,6859,6861],{"class":72,"line":480},[70,6857,6858],{"class":413},"              uses",[70,6860,287],{"class":80},[70,6862,6863],{"class":419},"actions/checkout@v4\n",[70,6865,6866],{"class":72,"line":485},[70,6867,164],{"emptyLinePlaceholder":163},[70,6869,6870,6872,6874,6876],{"class":72,"line":496},[70,6871,6804],{"class":80},[70,6873,414],{"class":413},[70,6875,287],{"class":80},[70,6877,6878],{"class":419},"Setup Node.js\n",[70,6880,6881,6883,6885],{"class":72,"line":507},[70,6882,6858],{"class":413},[70,6884,287],{"class":80},[70,6886,6887],{"class":419},"actions/setup-node@v4\n",[70,6889,6890,6893],{"class":72,"line":518},[70,6891,6892],{"class":413},"              with",[70,6894,6785],{"class":80},[70,6896,6897,6900,6902],{"class":72,"line":525},[70,6898,6899],{"class":413},"                  node-version",[70,6901,287],{"class":80},[70,6903,6904],{"class":419},"'22'\n",[70,6906,6907],{"class":72,"line":536},[70,6908,164],{"emptyLinePlaceholder":163},[70,6910,6911,6913,6915,6917],{"class":72,"line":547},[70,6912,6804],{"class":80},[70,6914,414],{"class":413},[70,6916,287],{"class":80},[70,6918,6919],{"class":419},"Create .env File\n",[70,6921,6922,6925,6927],{"class":72,"line":558},[70,6923,6924],{"class":413},"              run",[70,6926,287],{"class":80},[70,6928,6929],{"class":419},"echo \"${{ secrets.ENV }}\" > .env\n",[70,6931,6932],{"class":72,"line":567},[70,6933,164],{"emptyLinePlaceholder":163},[70,6935,6936,6938,6940,6942],{"class":72,"line":572},[70,6937,6804],{"class":80},[70,6939,414],{"class":413},[70,6941,287],{"class":80},[70,6943,6944],{"class":419},"Install Dependencies and Build\n",[70,6946,6947,6949,6951],{"class":72,"line":577},[70,6948,6924],{"class":413},[70,6950,287],{"class":80},[70,6952,6953],{"class":413},"|\n",[70,6955,6956],{"class":72,"line":583},[70,6957,6958],{"class":419},"                  npm install\n",[70,6960,6961],{"class":72,"line":588},[70,6962,6963],{"class":419},"                  npm run generate\n",[70,6965,6966],{"class":72,"line":594},[70,6967,164],{"emptyLinePlaceholder":163},[70,6969,6970,6972,6974,6976],{"class":72,"line":599},[70,6971,6804],{"class":80},[70,6973,414],{"class":413},[70,6975,287],{"class":80},[70,6977,6978],{"class":419},"Compress Build Folder\n",[70,6980,6981,6983,6985],{"class":72,"line":605},[70,6982,6924],{"class":413},[70,6984,287],{"class":80},[70,6986,6953],{"class":413},[70,6988,6989],{"class":72,"line":610},[70,6990,6991],{"class":419},"                  cd ./.output\n",[70,6993,6994],{"class":72,"line":616},[70,6995,6996],{"class":419},"                  tar -czvf build.tar.gz ./public\n",[70,6998,6999],{"class":72,"line":621},[70,7000,164],{"emptyLinePlaceholder":163},[70,7002,7003,7005,7007,7009],{"class":72,"line":633},[70,7004,6804],{"class":80},[70,7006,414],{"class":413},[70,7008,287],{"class":80},[70,7010,7011],{"class":419},"Copy to Server\n",[70,7013,7014,7016,7018],{"class":72,"line":638},[70,7015,6924],{"class":413},[70,7017,287],{"class":80},[70,7019,6953],{"class":413},[70,7021,7022],{"class":72,"line":644},[70,7023,6991],{"class":419},[70,7025,7026],{"class":72,"line":649},[70,7027,7028],{"class":419},"                  echo \"${{ secrets.SSH_PRIVATE_KEY }}\" > id_rsa\n",[70,7030,7031],{"class":72,"line":655},[70,7032,7033],{"class":419},"                  chmod 600 id_rsa\n",[70,7035,7036],{"class":72,"line":660},[70,7037,7038],{"class":419},"                  scp -o StrictHostKeyChecking=no -i id_rsa build.tar.gz ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }}:/var/www/project/build.tar.gz\n",[70,7040,7041],{"class":72,"line":666},[70,7042,164],{"emptyLinePlaceholder":163},[70,7044,7045,7047,7049,7051],{"class":72,"line":671},[70,7046,6804],{"class":80},[70,7048,414],{"class":413},[70,7050,287],{"class":80},[70,7052,7053],{"class":419},"Extract Build Folder On Server\n",[70,7055,7056,7058,7060],{"class":72,"line":677},[70,7057,6924],{"class":413},[70,7059,287],{"class":80},[70,7061,6953],{"class":413},[70,7063,7064],{"class":72,"line":682},[70,7065,6991],{"class":419},[70,7067,7068],{"class":72,"line":688},[70,7069,7070],{"class":419},"                  ssh -i id_rsa -o StrictHostKeyChecking=no ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }} \u003C\u003C 'EOF'\n",[70,7072,7073],{"class":72,"line":693},[70,7074,7075],{"class":419},"                  cd /var/www/project\n",[70,7077,7078],{"class":72,"line":699},[70,7079,7080],{"class":419},"                  tar -xzvf build.tar.gz\n",[70,7082,7083],{"class":72,"line":704},[70,7084,7085],{"class":419},"                  rm build.tar.gz\n",[70,7087,7088],{"class":72,"line":710},[70,7089,7090],{"class":419},"                  mv website website_old\n",[70,7092,7093],{"class":72,"line":715},[70,7094,7095],{"class":419},"                  mv public website\n",[70,7097,7098],{"class":72,"line":721},[70,7099,7100],{"class":419},"                  rm -rf website_old\n",[70,7102,7103],{"class":72,"line":726},[70,7104,7105],{"class":419},"                  EOF\n",[38,7107,7109],{"id":7108},"the-workflow-file-explained","The Workflow File Explained",[11,7111,7112],{},"Let's examine each section of the workflow file:",[1232,7114,7116],{"id":7115},"trigger-configuration","Trigger Configuration",[59,7118,7120],{"className":6760,"code":7119,"language":6762,"meta":65,"style":65},"name: Deploy to DigitalOcean\n\non:\n    push:\n        branches:\n            - main\n",[67,7121,7122,7130,7134,7140,7146,7152],{"__ignoreMap":65},[70,7123,7124,7126,7128],{"class":72,"line":73},[70,7125,414],{"class":413},[70,7127,287],{"class":80},[70,7129,6773],{"class":419},[70,7131,7132],{"class":72,"line":160},[70,7133,164],{"emptyLinePlaceholder":163},[70,7135,7136,7138],{"class":72,"line":167},[70,7137,6782],{"class":1311},[70,7139,6785],{"class":80},[70,7141,7142,7144],{"class":72,"line":175},[70,7143,6790],{"class":413},[70,7145,6785],{"class":80},[70,7147,7148,7150],{"class":72,"line":183},[70,7149,6797],{"class":413},[70,7151,6785],{"class":80},[70,7153,7154,7156],{"class":72,"line":191},[70,7155,6804],{"class":80},[70,7157,6807],{"class":419},[11,7159,7160,7161,7163],{},"This section gives the workflow a name and defines when it should run—specifically, when code is pushed to the ",[67,7162,6679],{}," branch. Every push to that branch will trigger the deployment, while pushes to any other branch will not.",[1232,7165,7167],{"id":7166},"the-deploy-job","The Deploy Job",[59,7169,7171],{"className":6760,"code":7170,"language":6762,"meta":65,"style":65},"jobs:\n    deploy:\n        runs-on: ubuntu-latest\n",[67,7172,7173,7179,7185],{"__ignoreMap":65},[70,7174,7175,7177],{"class":72,"line":73},[70,7176,6816],{"class":413},[70,7178,6785],{"class":80},[70,7180,7181,7183],{"class":72,"line":160},[70,7182,6823],{"class":413},[70,7184,6785],{"class":80},[70,7186,7187,7189,7191],{"class":72,"line":167},[70,7188,6830],{"class":413},[70,7190,287],{"class":80},[70,7192,6835],{"class":419},[11,7194,7195,7196,7198,7199,7202,7203,7206,7207,7210],{},"After the name and trigger configuration, we define the ",[67,7197,6816],{}," we need to run. In our case, we need a single job called ",[67,7200,7201],{},"deploy",". The ",[67,7204,7205],{},"runs-on"," property determines the type of environment required—in this case, the latest Ubuntu runner provided by GitHub. GitHub Actions uses these ",[256,7208,7209],{},"virtual environments"," to execute workflow steps. You can think of this as creating a fresh Ubuntu installation that runs the job and is then destroyed.",[1232,7212,7214],{"id":7213},"step-1-checkout-the-code","Step 1: Checkout the Code",[59,7216,7218],{"className":6760,"code":7217,"language":6762,"meta":65,"style":65},"steps:\n    - name: Checkout Code\n      uses: actions/checkout@v4\n",[67,7219,7220,7227,7238],{"__ignoreMap":65},[70,7221,7222,7225],{"class":72,"line":73},[70,7223,7224],{"class":413},"steps",[70,7226,6785],{"class":80},[70,7228,7229,7232,7234,7236],{"class":72,"line":160},[70,7230,7231],{"class":80},"    - ",[70,7233,414],{"class":413},[70,7235,287],{"class":80},[70,7237,6853],{"class":419},[70,7239,7240,7243,7245],{"class":72,"line":167},[70,7241,7242],{"class":413},"      uses",[70,7244,287],{"class":80},[70,7246,6863],{"class":419},[11,7248,7249,7250,7253,7254,7257],{},"Alright, first step! This uses the official ",[67,7251,7252],{},"checkout"," action to fetch your repository's code into the runner. It's essentially equivalent to a ",[67,7255,7256],{},"git clone"," operation. By default, it places all repository files in the root directory of the workflow runner, making them immediately accessible to subsequent steps.",[1232,7259,7261],{"id":7260},"step-2-install-node","Step 2: Install Node",[59,7263,7265],{"className":6760,"code":7264,"language":6762,"meta":65,"style":65},"- name: Setup Node.js\n  uses: actions/setup-node@v4\n  with:\n      node-version: '22'\n",[67,7266,7267,7278,7287,7294],{"__ignoreMap":65},[70,7268,7269,7272,7274,7276],{"class":72,"line":73},[70,7270,7271],{"class":80},"- ",[70,7273,414],{"class":413},[70,7275,287],{"class":80},[70,7277,6878],{"class":419},[70,7279,7280,7283,7285],{"class":72,"line":160},[70,7281,7282],{"class":413},"  uses",[70,7284,287],{"class":80},[70,7286,6887],{"class":419},[70,7288,7289,7292],{"class":72,"line":167},[70,7290,7291],{"class":413},"  with",[70,7293,6785],{"class":80},[70,7295,7296,7299,7301],{"class":72,"line":175},[70,7297,7298],{"class":413},"      node-version",[70,7300,287],{"class":80},[70,7302,6904],{"class":419},[11,7304,1213,7305,7308],{},[67,7306,7307],{},"actions/setup-node@v4"," is an official GitHub action that handles the installation and configuration of Node.js in your workflow environment. Without this step, your runner would either have no Node.js installed or would use whatever default version is pre-installed on the Ubuntu runner (which might not match your application's requirements).",[11,7310,1213,7311,7314,7315,7318],{},[67,7312,7313],{},"with:"," section specifies parameters for the action, and ",[67,7316,7317],{},"node-version: '22'"," tells the action specifically which version of Node.js to install.",[1232,7320,7322],{"id":7321},"step-3-create-env-file","Step 3: Create env File",[59,7324,7326],{"className":6760,"code":7325,"language":6762,"meta":65,"style":65},"- name: Create .env File\n  run: echo \"${{ secrets.ENV }}\" > .env\n",[67,7327,7328,7338],{"__ignoreMap":65},[70,7329,7330,7332,7334,7336],{"class":72,"line":73},[70,7331,7271],{"class":80},[70,7333,414],{"class":413},[70,7335,287],{"class":80},[70,7337,6919],{"class":419},[70,7339,7340,7343,7345],{"class":72,"line":160},[70,7341,7342],{"class":413},"  run",[70,7344,287],{"class":80},[70,7346,6929],{"class":419},[11,7348,7349,7350,7353,7354,7356],{},"Now, our application might rely on environment variables, typically stored in an ",[67,7351,7352],{},".env"," file. Since this file isn't part of our repository, it won't exist in the runner's environment. If the build process depends on the ",[67,7355,7352],{}," file, we need to create it first.",[11,7358,7359,7360,7362],{},"How can we do that? In a conventional development workflow, you might create the ",[67,7361,7352],{}," file manually. But in an automated CI/CD pipeline, you need a secure way to provide these values without exposing them in your code repository.",[11,7364,7365,7366,7369,7370,7373],{},"This is where ",[52,7367,7368],{},"GitHub Secrets"," come in. When you store a value as a GitHub Secret (in this case, a secret named ",[67,7371,7372],{},"ENV","), it's encrypted and only accessible during workflow execution. The secret isn't visible in logs, and even users with repository access can't view its content directly.",[11,7375,7376,7377,7379,7380,7382],{},"You can manage your repository's secrets from the GitHub dashboard. In this case, we store exactly what we need for the ",[67,7378,7352],{}," file in an ",[67,7381,7372],{}," secret:",[59,7384,7387],{"className":7385,"code":7386,"language":1282},[1280],"NUXT_PUBLIC_SITE_URL=https://project.com\nPOSTHOG_API_HOST=https://us.i.posthog.com\nPOSTHOG_API_KEY=XXXXXXXXXXXXXXXXXX\n",[67,7388,7386],{"__ignoreMap":65},[11,7390,7391,7392,7395,7396,7398,7399,7401],{},"The command ",[67,7393,7394],{},"echo \"${{ secrets.ENV }}\" > .env"," writes the contents of the ",[67,7397,7372],{}," secret into a new ",[67,7400,7352],{}," file in the root of your project directory. Perfect! Let's continue.",[1232,7403,7405],{"id":7404},"step-4-generate-the-static-site","Step 4: Generate the Static Site",[59,7407,7409],{"className":6760,"code":7408,"language":6762,"meta":65,"style":65},"- name: Install Dependencies and Build\n  run: |\n      npm install\n      npm run generate\n",[67,7410,7411,7421,7429,7434],{"__ignoreMap":65},[70,7412,7413,7415,7417,7419],{"class":72,"line":73},[70,7414,7271],{"class":80},[70,7416,414],{"class":413},[70,7418,287],{"class":80},[70,7420,6944],{"class":419},[70,7422,7423,7425,7427],{"class":72,"line":160},[70,7424,7342],{"class":413},[70,7426,287],{"class":80},[70,7428,6953],{"class":413},[70,7430,7431],{"class":72,"line":167},[70,7432,7433],{"class":419},"      npm install\n",[70,7435,7436],{"class":72,"line":175},[70,7437,7438],{"class":419},"      npm run generate\n",[11,7440,7441,7442,7444,7445,7448,7449,7452,7453,7456],{},"Here, the workflow runs ",[67,7443,6701],{}," to install all the Node.js dependencies. Then, it runs the ",[67,7446,7447],{},"generate"," script defined in our ",[67,7450,7451],{},"package.json",", which compiles the code and generates all the static files for our website, storing them in the ",[67,7454,7455],{},".output/public"," directory.",[1232,7458,7460],{"id":7459},"step-5-compress-the-files","Step 5: Compress the Files",[11,7462,7463],{},"Great! We have our static site generated. Now, we need a way to move those files to a public server so they are accessible on the internet. Remember, the runner's environment is temporary and gets destroyed as soon as the workflow completes, so we must export our site files to a permanent location. To do this efficiently, let's compress them into a single archive:",[59,7465,7467],{"className":6760,"code":7466,"language":6762,"meta":65,"style":65},"- name: Compress Build Folder\n  run: |\n      cd ./.output\n      tar -czvf build.tar.gz ./public\n",[67,7468,7469,7479,7487,7492],{"__ignoreMap":65},[70,7470,7471,7473,7475,7477],{"class":72,"line":73},[70,7472,7271],{"class":80},[70,7474,414],{"class":413},[70,7476,287],{"class":80},[70,7478,6978],{"class":419},[70,7480,7481,7483,7485],{"class":72,"line":160},[70,7482,7342],{"class":413},[70,7484,287],{"class":80},[70,7486,6953],{"class":413},[70,7488,7489],{"class":72,"line":167},[70,7490,7491],{"class":419},"      cd ./.output\n",[70,7493,7494],{"class":72,"line":175},[70,7495,7496],{"class":419},"      tar -czvf build.tar.gz ./public\n",[11,7498,7499,7500,7502,7503,7506,7507,7510],{},"Here, the workflow navigates to the ",[67,7501,6145],{}," directory and creates a compressed tarball (",[67,7504,7505],{},"build.tar.gz",") of the ",[67,7508,7509],{},"public"," directory. Compressing the files makes the transfer to your server faster and more reliable.",[1232,7512,7514],{"id":7513},"step-6-copy-the-compressed-files-to-the-server","Step 6: Copy the Compressed Files to the Server",[11,7516,7517],{},"We are in the final stretch: we need to move our compressed files to the web server and extract them. This step handles the first part.",[11,7519,7520,7521,7524,7525,7528,7529,7531,7532,7535,7536,7539,7540,1339],{},"How can we copy a file between servers? In Linux, we can use the ",[67,7522,7523],{},"scp"," command, which stands for ",[52,7526,7527],{},"\"secure copy\"",". It takes two main parameters: the path of the local file and the path of the destination. For example, to copy ",[67,7530,7505],{}," into the ",[67,7533,7534],{},"/var/www/my-site"," folder on a server with the IP ",[67,7537,7538],{},"192.168.123.45",", using the user ",[67,7541,7542],{},"myuser",[59,7544,7546],{"className":6019,"code":7545,"language":6021,"meta":65,"style":65},"scp build.tar.gz myuser@192.168.123.45:/var/www/my-site\n",[67,7547,7548],{"__ignoreMap":65},[70,7549,7550,7552,7555],{"class":72,"line":73},[70,7551,7523],{"class":76},[70,7553,7554],{"class":419}," build.tar.gz",[70,7556,7557],{"class":419}," myuser@192.168.123.45:/var/www/my-site\n",[11,7559,7560],{},"Now, the server will ask for authentication—otherwise, anyone could upload files to our server, and we definitely don't want that! To authenticate our deployment process securely, we'll use an SSH key.",[11,7562,7563,7564,1127,7567,7570],{},"An SSH key consists of two parts: a ",[52,7565,7566],{},"public key",[52,7568,7569],{},"private key",". Think of the public key as a lock installed on your server's door, while the private key is the unique key that opens that specific lock. The public key will live on the server, and the private key stays securely on the machine attempting to connect to it (in this case, our GitHub Actions runner).",[11,7572,7573],{},"Here's how you can create and setup an SHH key, step by step:",[7575,7576,7578],"h4",{"id":7577},"generate-an-ssh-key-on-your-local-computer","Generate an SSH key on your local computer:",[59,7580,7582],{"className":6019,"code":7581,"language":6021,"meta":65,"style":65},"ssh-keygen -t ed25519 -C \"your-email@example.com\"\n",[67,7583,7584],{"__ignoreMap":65},[70,7585,7586,7589,7592,7595,7598],{"class":72,"line":73},[70,7587,7588],{"class":76},"ssh-keygen",[70,7590,7591],{"class":1311}," -t",[70,7593,7594],{"class":419}," ed25519",[70,7596,7597],{"class":1311}," -C",[70,7599,7600],{"class":419}," \"your-email@example.com\"\n",[11,7602,7603,7604,7607,7608,7611,7612,7615],{},"Press ",[52,7605,7606],{},"Enter"," to accept the defaults. For automation purposes like GitHub Actions, we typically won't set up a passphrase. This creates two files: a public key (stored in ",[67,7609,7610],{},"~/.ssh/id_ed25519.pub",") and a private key (in ",[67,7613,7614],{},"~/.ssh/id_ed25519",").",[7575,7617,7619],{"id":7618},"view-and-copy-the-public-key-to-your-clipboard","View and copy the public key to your clipboard:",[59,7621,7623],{"className":6019,"code":7622,"language":6021,"meta":65,"style":65},"cat ~/.ssh/id_ed25519.pub\n",[67,7624,7625],{"__ignoreMap":65},[70,7626,7627,7630],{"class":72,"line":73},[70,7628,7629],{"class":76},"cat",[70,7631,7632],{"class":419}," ~/.ssh/id_ed25519.pub\n",[11,7634,7635],{},"This command will output the public key. Copy it to your clipboard. The output will look something like:",[59,7637,7639],{"className":6019,"code":7638,"language":6021,"meta":65,"style":65},"ssh-ed25519 AAAAC3N...6OdN/x8L1fgmt your-email@example.com\n",[67,7640,7641],{"__ignoreMap":65},[70,7642,7643,7646,7649],{"class":72,"line":73},[70,7644,7645],{"class":76},"ssh-ed25519",[70,7647,7648],{"class":419}," AAAAC3N...6OdN/x8L1fgmt",[70,7650,7651],{"class":419}," your-email@example.com\n",[7575,7653,7655],{"id":7654},"add-the-public-key-to-your-digitalocean-droplet","Add the public key to your DigitalOcean droplet:",[123,7657,7658,7671,7678],{},[126,7659,7660,7661,7664,7665,7664,7668],{},"Go to ",[52,7662,7663],{},"DigitalOcean Dashboard"," → ",[52,7666,7667],{},"Settings",[52,7669,7670],{},"Security",[126,7672,7673,7674,7677],{},"Click ",[52,7675,7676],{},"Add SSH Key",", paste the public key, and save.",[126,7679,7680,7681,1114],{},"Alternatively, you can add it directly to your server's ",[67,7682,7683],{},"~/.ssh/authorized_keys",[7575,7685,7687],{"id":7686},"set-up-the-private-key-and-connection-details-in-github","Set up the private key and connection details in GitHub:",[123,7689,7690,7701],{},[126,7691,7692,7693,7664,7695,7664,7698],{},"Go to your GitHub repository → ",[52,7694,7667],{},[52,7696,7697],{},"Secrets and variables",[52,7699,7700],{},"Actions",[126,7702,7703,7704],{},"Add the following repository secrets:\n",[123,7705,7706,7715,7724],{},[126,7707,7708,7711,7712,7714],{},[67,7709,7710],{},"SSH_PRIVATE_KEY",": The entire contents of your private key file (",[67,7713,7614],{},")",[126,7716,7717,7720,7721,7714],{},[67,7718,7719],{},"DROPLET_IP",": Your DigitalOcean droplet's IP address (e.g., ",[67,7722,7723],{},"123.456.789.0",[126,7725,7726,7729,7730,7714],{},[67,7727,7728],{},"DROPLET_USER",": The username you use to log into your server (e.g. ",[67,7731,7732],{},"nico",[11,7734,7735,7736,7738],{},"Now it's time to copy our site to the web server using ",[67,7737,7523],{},". Here's the code for that step:",[59,7740,7742],{"className":6760,"code":7741,"language":6762,"meta":65,"style":65},"- name: Copy to Server\n  run: |\n      cd ./.output\n      echo \"${{ secrets.SSH_PRIVATE_KEY }}\" > id_rsa\n      chmod 600 id_rsa\n      scp -o StrictHostKeyChecking=no -i id_rsa build.tar.gz ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }}:/var/www/project/build.tar.gz\n",[67,7743,7744,7754,7762,7766,7771,7776],{"__ignoreMap":65},[70,7745,7746,7748,7750,7752],{"class":72,"line":73},[70,7747,7271],{"class":80},[70,7749,414],{"class":413},[70,7751,287],{"class":80},[70,7753,7011],{"class":419},[70,7755,7756,7758,7760],{"class":72,"line":160},[70,7757,7342],{"class":413},[70,7759,287],{"class":80},[70,7761,6953],{"class":413},[70,7763,7764],{"class":72,"line":167},[70,7765,7491],{"class":419},[70,7767,7768],{"class":72,"line":175},[70,7769,7770],{"class":419},"      echo \"${{ secrets.SSH_PRIVATE_KEY }}\" > id_rsa\n",[70,7772,7773],{"class":72,"line":183},[70,7774,7775],{"class":419},"      chmod 600 id_rsa\n",[70,7777,7778],{"class":72,"line":191},[70,7779,7780],{"class":419},"      scp -o StrictHostKeyChecking=no -i id_rsa build.tar.gz ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }}:/var/www/project/build.tar.gz\n",[11,7782,7783],{},"This critical step transfers our build to the DigitalOcean server:",[5826,7785,7786,7795,7801,7808,7814],{},[126,7787,7788,7789,7791,7792,7794],{},"It changes the current directory to ",[67,7790,6145],{},", where our ",[67,7793,7505],{}," is stored.",[126,7796,7797,7798,7800],{},"It creates a temporary SSH key file from the ",[67,7799,7710],{}," secret.",[126,7802,7803,7804,7807],{},"Sets the correct permissions on the key file: ",[67,7805,7806],{},"600",", which grants read and write access for the owner only.",[126,7809,7810,7811,7813],{},"Uses ",[67,7812,7523],{}," to transfer the compressed build file to the server.",[126,7815,1213,7816,7819],{},[67,7817,7818],{},"-o StrictHostKeyChecking=no"," option skips the host verification prompt.",[1232,7821,7823],{"id":7822},"step-7-uncompress-files","Step 7: Uncompress Files",[11,7825,7826,7827,7829],{},"We are almost there! If the previous step was successful, the ",[67,7828,7505],{}," should be stored on our server. There are just a few things left to do:",[123,7831,7832,7841,7844,7857],{},[126,7833,7834,7835,7837,7838,7840],{},"Uncompress ",[67,7836,7505],{},", which will create a ",[67,7839,7509],{}," folder.",[126,7842,7843],{},"Remove the compressed file (just to keep things clean).",[126,7845,7846,7847,7850,7851,7853,7854,1130],{},"Rename the directories: the old website version folder should be renamed ",[67,7848,7849],{},"website_old",", and the ",[67,7852,7509],{}," folder will be renamed ",[67,7855,7856],{},"website",[126,7858,7859,7860,7862],{},"Remove the ",[67,7861,7849],{}," folder (again, to keep things clean). You can decide to keep it for a while in case you need to roll back if something goes wrong.",[11,7864,7865,7866,7869,7870,7873,7874,7615],{},"We need to execute this chain of commands on the web server. To do so, we can use ",[67,7867,7868],{},"ssh"," to establish an SSH connection to the server using the key file we created in the previous step, ",[67,7871,7872],{},"id_rsa",". Then, we can pass the commands to execute in a string using heredoc (",[67,7875,7876],{},"\u003C\u003C 'EOF'",[59,7878,7880],{"className":6760,"code":7879,"language":6762,"meta":65,"style":65},"- name: Extract Build Folder On Server\n  run: |\n      cd ./.output\n      ssh -i id_rsa -o StrictHostKeyChecking=no ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }} \u003C\u003C 'EOF'\n      cd /var/www/project\n      tar -xzvf build.tar.gz\n      rm build.tar.gz\n      mv website website_old\n      mv public website\n      rm -rf website_old\n      EOF\n",[67,7881,7882,7892,7900,7904,7909,7914,7919,7924,7929,7934,7939],{"__ignoreMap":65},[70,7883,7884,7886,7888,7890],{"class":72,"line":73},[70,7885,7271],{"class":80},[70,7887,414],{"class":413},[70,7889,287],{"class":80},[70,7891,7053],{"class":419},[70,7893,7894,7896,7898],{"class":72,"line":160},[70,7895,7342],{"class":413},[70,7897,287],{"class":80},[70,7899,6953],{"class":413},[70,7901,7902],{"class":72,"line":167},[70,7903,7491],{"class":419},[70,7905,7906],{"class":72,"line":175},[70,7907,7908],{"class":419},"      ssh -i id_rsa -o StrictHostKeyChecking=no ${{ secrets.DROPLET_USER }}@${{ secrets.DROPLET_IP }} \u003C\u003C 'EOF'\n",[70,7910,7911],{"class":72,"line":183},[70,7912,7913],{"class":419},"      cd /var/www/project\n",[70,7915,7916],{"class":72,"line":191},[70,7917,7918],{"class":419},"      tar -xzvf build.tar.gz\n",[70,7920,7921],{"class":72,"line":340},[70,7922,7923],{"class":419},"      rm build.tar.gz\n",[70,7925,7926],{"class":72,"line":352},[70,7927,7928],{"class":419},"      mv website website_old\n",[70,7930,7931],{"class":72,"line":364},[70,7932,7933],{"class":419},"      mv public website\n",[70,7935,7936],{"class":72,"line":375},[70,7937,7938],{"class":419},"      rm -rf website_old\n",[70,7940,7941],{"class":72,"line":381},[70,7942,7943],{"class":419},"      EOF\n",[11,7945,7946],{},"This approach creates a seamless deployment by swapping directories rather than overwriting files, minimizing downtime.",[38,7948,7950],{"id":7949},"what-makes-this-workflow-effective","What Makes This Workflow Effective",[5826,7952,7953,7958,7964],{},[126,7954,7955,7957],{},[52,7956,7670],{},": All sensitive information is stored as GitHub secrets",[126,7959,7960,7963],{},[52,7961,7962],{},"Zero Downtime",": The site remains available during deployment with the directory swap technique",[126,7965,7966,7969],{},[52,7967,7968],{},"Automation",": The entire process runs automatically on every push to main",[38,7971,7973],{"id":7972},"required-github-secrets","Required GitHub Secrets",[11,7975,7976],{},"For this workflow to function, you need to configure these GitHub secrets:",[123,7978,7979,7984,7989,7994],{},[126,7980,7981,7983],{},[67,7982,7372],{},": Your application's environment variables",[126,7985,7986,7988],{},[67,7987,7710],{},": The private SSH key for accessing your server",[126,7990,7991,7993],{},[67,7992,7719],{},": Your DigitalOcean droplet's IP address",[126,7995,7996,7998],{},[67,7997,7728],{},": The username for SSH access to your server",[38,8000,8002],{"id":8001},"conclusion","Conclusion",[11,8004,8005,8006,8008],{},"This GitHub Action workflow creates a robust CI/CD pipeline that automatically builds and deploys your application to DigitalOcean whenever you update your ",[67,8007,6679],{}," branch. It manages environment variables securely, ensures a smooth deployment process, and minimizes potential downtime.",[11,8010,8011],{},"It will save you valuable time, letting you focus on what's most important: developing your app.",[11,8013,8014,8015,8018],{},"Want more GitHub Actions tips and tricks? ",[46,8016,5926],{"href":5924,"rel":8017},[116],". Until next time!",[1013,8020,8021],{},"html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}",{"title":65,"searchDepth":160,"depth":160,"links":8023},[8024,8025,8036,8037,8038],{"id":6731,"depth":160,"text":6732},{"id":7108,"depth":160,"text":7109,"children":8026},[8027,8028,8029,8030,8031,8032,8033,8034,8035],{"id":7115,"depth":167,"text":7116},{"id":7166,"depth":167,"text":7167},{"id":7213,"depth":167,"text":7214},{"id":7260,"depth":167,"text":7261},{"id":7321,"depth":167,"text":7322},{"id":7404,"depth":167,"text":7405},{"id":7459,"depth":167,"text":7460},{"id":7513,"depth":167,"text":7514},{"id":7822,"depth":167,"text":7823},{"id":7949,"depth":160,"text":7950},{"id":7972,"depth":160,"text":7973},{"id":8001,"depth":160,"text":8002},"2025-02-25","Auto-deploy is one of the great features of Netlify and Vercel. Whenever you push to main... done! Your site builds automatically. I love that, but I prefer to manage my own server.","/img/blog/nuxt-deploy-github-actions-digital-ocean.png",{},"/blog/automatically-deploy-your-nuxt-static-site-to-digitalocean-with-github-actions",{"title":6671,"description":8040},"blog/automatically-deploy-your-nuxt-static-site-to-digitalocean-with-github-actions","Za_WYOcttKXUUcelpG6SkefjbPySNWXQ7o7f1mkWuPg",{"id":8048,"title":8049,"body":8050,"category":6659,"date":9098,"description":8054,"draft":1028,"extension":64,"image":9099,"meta":9100,"navigation":163,"path":9101,"seo":9102,"stem":9103,"tighten":1028,"__hash__":9104},"blog/blog/a-step-by-step-guide-to-setting-up-permissions-on-your-linux-web-server.md","A Step-by-Step Guide to Setting Up Permissions on Your Linux Web Server",{"type":8,"value":8051,"toc":9085},[8052,8055,8062,8065,8069,8082,8087,8107,8112,8133,8136,8177,8183,8193,8204,8227,8231,8245,8260,8263,8277,8284,8301,8304,8308,8315,8320,8323,8364,8367,8382,8396,8399,8413,8427,8432,8435,8452,8457,8471,8474,8488,8498,8512,8518,8533,8536,8540,8546,8563,8577,8586,8593,8607,8610,8621,8630,8637,8641,8653,8674,8684,8688,8691,8751,8755,8772,8795,8799,8813,8819,8830,8834,8844,8853,8866,8882,8908,8930,8940,8952,8968,8977,8989,8992,9008,9012,9015,9030,9033,9069,9072,9074,9077,9080,9082],[11,8053,8054],{},"Web server permissions: setting them right can be challenging, but setting them wrong can be disastrous. Of course, we don't want to grant a third party access to private files and folders or allow the execution of malicious code.",[11,8056,8057,8058,8061],{},"It's frustrating when your users encounter a ",[52,8059,8060],{},"403 Forbidden"," error while visiting your website or trying to download a file. But trust me, the solution is never to 'just set the permissions to 777,' despite how often I've seen that advice online.",[11,8063,8064],{},"Want to secure the permissions of your Linux web server once and for all? Then this guide is for you!",[38,8066,8068],{"id":8067},"a-quick-rundown","A Quick Rundown",[11,8070,8071,8072,3791,8075,3977,8078,8081],{},"In Linux, the operating system can have many users. Each user can belong to multiple groups, and permissions determine what actions a given user or group can perform on a specific file or folder. These actions are ",[52,8073,8074],{},"read",[52,8076,8077],{},"write",[52,8079,8080],{},"execute",". The names are quite self-explanatory, but let's dive into what they actually mean:",[11,8083,8084],{},[52,8085,8086],{},"For Files:",[123,8088,8089,8095,8101],{},[126,8090,8091,8094],{},[52,8092,8093],{},"Read (r):"," View the contents of the file.",[126,8096,8097,8100],{},[52,8098,8099],{},"Write (w):"," Modify the contents of the file.",[126,8102,8103,8106],{},[52,8104,8105],{},"Execute (x):"," Run the file (e.g., a bash script).",[11,8108,8109],{},[52,8110,8111],{},"For Directories:",[123,8113,8114,8119,8124],{},[126,8115,8116,8118],{},[52,8117,8093],{}," List the contents of the directory.",[126,8120,8121,8123],{},[52,8122,8099],{}," Create, delete, or modify files within the directory.",[126,8125,8126,8128,8129,8132],{},[52,8127,8105],{}," Navigate (",[67,8130,8131],{},"cd",") into the directory. This means you can access the directory and perform actions on its contents, but not necessarily list them without read permission.",[11,8134,8135],{},"Each file and folder has three sets of these permissions:",[123,8137,8138,8149,8163],{},[126,8139,8140,8141,8144,8145,8148],{},"The first set determines what the ",[52,8142,8143],{},"owner"," can do. By default, the owner of a file or folder is the user who created it. Normally, the owner has ",[67,8146,8147],{},"rwx"," (read, write, and execute) permissions.",[126,8150,8151,8152,8155,8156,8159,8160,8162],{},"The second set determines what ",[52,8153,8154],{},"other users in the same group as the owner"," can do. These permissions can be more restrictive. For example, you might want these users to be able to read and write the file but not execute it, resulting in ",[67,8157,8158],{},"rw-"," (the hyphen in place of the ",[67,8161,4021],{}," means they lack that permission).",[126,8164,8165,8166,8169,8170,8173,8174,7615],{},"The third set determines what ",[52,8167,8168],{},"any other user"," can do. Perhaps you want anyone to only read a file (",[67,8171,8172],{},"r--","), or you might want to forbid all actions (",[67,8175,8176],{},"---",[11,8178,8179,8180,1130],{},"These three sets of permissions are expressed as a single concatenated string, such as ",[67,8181,8182],{},"rwxrw-r--",[11,8184,8185,8186,8189,8190,8192],{},"Additionally, at the beginning of the string, you'll find a ",[67,8187,8188],{},"d"," if the item is a directory, or a ",[67,8191,77],{}," if it is not.",[11,8194,8195,8196,8199,8200,8203],{},"For example, the permissions of your ",[67,8197,8198],{},"/var/www/html/"," directory might look like this: ",[67,8201,8202],{},"drwxr-xr-x",". This means:",[123,8205,8206,8211,8216,8222],{},[126,8207,8208,8210],{},[67,8209,8188],{}," indicates that it is a directory. Remember, executing a directory means being able to open the folder.",[126,8212,8213,8215],{},[67,8214,8147],{}," means the owner can read, write, and execute.",[126,8217,8218,8221],{},[67,8219,8220],{},"r-x"," means users in the group can read and execute.",[126,8223,8224,8226],{},[67,8225,8220],{}," means any other user can read and execute.",[1232,8228,8230],{"id":8229},"how-to-change-owner-and-group","How to Change Owner and Group",[11,8232,8233,8234,8237,8238,2792,8241,8244],{},"To change the owner and group of a file or directory, use the ",[67,8235,8236],{},"chown"," command. For example, to change the owner of ",[67,8239,8240],{},"file.txt",[67,8242,8243],{},"username",", run:",[59,8246,8248],{"className":6019,"code":8247,"language":6021,"meta":65,"style":65},"chown username file.txt\n",[67,8249,8250],{"__ignoreMap":65},[70,8251,8252,8254,8257],{"class":72,"line":73},[70,8253,8236],{"class":76},[70,8255,8256],{"class":419}," username",[70,8258,8259],{"class":419}," file.txt\n",[11,8261,8262],{},"To change both the owner and the group at once, use a colon to separate them:",[59,8264,8266],{"className":6019,"code":8265,"language":6021,"meta":65,"style":65},"chown username:groupname file.txt\n",[67,8267,8268],{"__ignoreMap":65},[70,8269,8270,8272,8275],{"class":72,"line":73},[70,8271,8236],{"class":76},[70,8273,8274],{"class":419}," username:groupname",[70,8276,8259],{"class":419},[11,8278,8279,8280,8283],{},"If you need to change the owner or group for an entire directory and its contents, add the ",[67,8281,8282],{},"-R"," option to apply changes recursively:",[59,8285,8287],{"className":6019,"code":8286,"language":6021,"meta":65,"style":65},"chown -R username:groupname /path/to/directory\n",[67,8288,8289],{"__ignoreMap":65},[70,8290,8291,8293,8296,8298],{"class":72,"line":73},[70,8292,8236],{"class":76},[70,8294,8295],{"class":1311}," -R",[70,8297,8274],{"class":419},[70,8299,8300],{"class":419}," /path/to/directory\n",[11,8302,8303],{},"Always double-check your commands and file paths before running them to avoid unintentionally altering critical system files.",[1232,8305,8307],{"id":8306},"how-to-change-permissions","How to Change Permissions",[11,8309,8310,8311,8314],{},"To modify file or directory permissions, use the ",[67,8312,8313],{},"chmod"," command. There are two common methods: numeric (octal) and symbolic.",[11,8316,8317],{},[52,8318,8319],{},"Numeric Method:",[11,8321,8322],{},"Permissions are set using numbers:",[123,8324,8325,8333,8341,8349,8357],{},[126,8326,8327,2650,8330,8332],{},[67,8328,8329],{},"7",[67,8331,8147],{}," (read, write, execute)",[126,8334,8335,2650,8338,8340],{},[67,8336,8337],{},"6",[67,8339,8158],{}," (read, write)",[126,8342,8343,2650,8346,8348],{},[67,8344,8345],{},"5",[67,8347,8220],{}," (read, execute)",[126,8350,8351,2650,8354,8356],{},[67,8352,8353],{},"4",[67,8355,8172],{}," (read only)",[126,8358,8359,2650,8361,8363],{},[67,8360,3279],{},[67,8362,8176],{}," (no permissions)",[11,8365,8366],{},"For example, to set permissions for a folder so that the owner has full permissions and everyone else has read and execute, run:",[59,8368,8370],{"className":6019,"code":8369,"language":6021,"meta":65,"style":65},"chmod 755 my-folder/\n",[67,8371,8372],{"__ignoreMap":65},[70,8373,8374,8376,8379],{"class":72,"line":73},[70,8375,8313],{"class":76},[70,8377,8378],{"class":1311}," 755",[70,8380,8381],{"class":419}," my-folder/\n",[11,8383,8384,8385,8387,8388,8391,8392,8395],{},"Additionally, we can add the digit ",[67,8386,4084],{}," before the permission numbers: ",[67,8389,8390],{},"2755",". This is used to set the ",[52,8393,8394],{},"setgid"," (Set Group ID) permission on the directory, which makes files created within the directory inherit the group of the directory, rather than the group of the user who created the file.",[11,8397,8398],{},"For instance:",[59,8400,8402],{"className":6019,"code":8401,"language":6021,"meta":65,"style":65},"chmod 2755 my-folder/\n",[67,8403,8404],{"__ignoreMap":65},[70,8405,8406,8408,8411],{"class":72,"line":73},[70,8407,8313],{"class":76},[70,8409,8410],{"class":1311}," 2755",[70,8412,8381],{"class":419},[11,8414,8415,8416,8419,8420,3029,8423,8426],{},"This ensures that files created inside ",[67,8417,8418],{},"my-folder/"," will inherit the ",[52,8421,8422],{},"group ownership of the directory",[67,8424,8425],{},"www-data",", for example), which is especially useful for shared directories where multiple users need to write to the same location but maintain consistent group ownership.",[11,8428,8429],{},[52,8430,8431],{},"Symbolic Method:",[11,8433,8434],{},"This method allows you to add or remove specific permissions:",[123,8436,8437,8442,8447],{},[126,8438,8439,8441],{},[67,8440,4936],{}," to add a permission",[126,8443,8444,8446],{},[67,8445,77],{}," to remove a permission",[126,8448,8449,8451],{},[67,8450,1323],{}," to set the exact permission",[11,8453,8454,8455,8244],{},"For example, to add execute permission for the group on ",[67,8456,8240],{},[59,8458,8460],{"className":6019,"code":8459,"language":6021,"meta":65,"style":65},"chmod g+x file.txt\n",[67,8461,8462],{"__ignoreMap":65},[70,8463,8464,8466,8469],{"class":72,"line":73},[70,8465,8313],{"class":76},[70,8467,8468],{"class":419}," g+x",[70,8470,8259],{"class":419},[11,8472,8473],{},"Similarly, to remove write permission for others:",[59,8475,8477],{"className":6019,"code":8476,"language":6021,"meta":65,"style":65},"chmod o-w file.txt\n",[67,8478,8479],{"__ignoreMap":65},[70,8480,8481,8483,8486],{"class":72,"line":73},[70,8482,8313],{"class":76},[70,8484,8485],{"class":419}," o-w",[70,8487,8259],{"class":419},[11,8489,8490,8491,8493,8494,8497],{},"To set the ",[52,8492,8394],{}," (set group identity) permission on a directory, you can use the ",[67,8495,8496],{},"g+s"," flag. This ensures that files created inside the directory will inherit the directory's group:",[59,8499,8501],{"className":6019,"code":8500,"language":6021,"meta":65,"style":65},"chmod g+s my-folder/\n",[67,8502,8503],{"__ignoreMap":65},[70,8504,8505,8507,8510],{"class":72,"line":73},[70,8506,8313],{"class":76},[70,8508,8509],{"class":419}," g+s",[70,8511,8381],{"class":419},[11,8513,8514,8515,8517],{},"For directories, if you need to change permissions for all contained files and subdirectories, use the ",[67,8516,8282],{}," option:",[59,8519,8521],{"className":6019,"code":8520,"language":6021,"meta":65,"style":65},"chmod -R 755 my-folder/\n",[67,8522,8523],{"__ignoreMap":65},[70,8524,8525,8527,8529,8531],{"class":72,"line":73},[70,8526,8313],{"class":76},[70,8528,8295],{"class":1311},[70,8530,8378],{"class":1311},[70,8532,8381],{"class":419},[11,8534,8535],{},"These commands help ensure that your files and directories have the correct permissions to maintain both functionality and security.",[38,8537,8539],{"id":8538},"the-right-permissions-for-your-website-files","The Right Permissions for your Website Files",[11,8541,8542,8543],{},"Now that we're all on the same page, let's tackle the big question: ",[52,8544,8545],{},"What permissions should my website's files and folders have?",[11,8547,8548,8549,8551,8552,8554,8555,8558,8559,8562],{},"If you're using Nginx or Apache to serve your site, you're likely aware that these web servers run under their own user accounts. Typically, this user is called ",[67,8550,8425],{},", and it also has a corresponding group named ",[67,8553,8425],{},". The web server needs ",[52,8556,8557],{},"read access"," to files and folders that should be publicly accessible. In some cases, it also requires ",[52,8560,8561],{},"write access"," to certain subdirectories—such as when a PHP process needs to log data or when visitors are allowed to upload files to a temporary folder.",[11,8564,8565,8566,8569,8570,8572,8573,8576],{},"When you connect to your server via SSH, you're usually using your own user account. This could be the superuser ",[67,8567,8568],{},"root",", or a user you've created for yourself, like ",[67,8571,7732],{},". You might create a directory for your new side project, such as ",[67,8574,8575],{},"/var/www/side-project",", and then add files manually or pull them from a Git repository.",[11,8578,8579,8580,8582,8583,8585],{},"Here's the issue: if the web server user (",[67,8581,8425],{},") doesn't have permission to read a file owned by your user (",[67,8584,7732],{},"), the server will return an error when trying to access it.",[11,8587,8588,8589,8592],{},"How can we fix that? We can adjust the permissions of the directory containing all your websites (",[67,8590,8591],{},"/var/www",") and set the following:",[123,8594,8595,8601],{},[126,8596,8597,8598,8600],{},"Set your user (",[67,8599,7732],{},") as the owner.",[126,8602,8603,8604,8606],{},"Set the web server group (",[67,8605,8425],{},") as the group.",[11,8608,8609],{},"Then, determine the following permissions:",[123,8611,8612,8615,8618],{},[126,8613,8614],{},"The owner can read, write, and execute files and directories.",[126,8616,8617],{},"Any user in the group can read files, and read and execute directories.",[126,8619,8620],{},"Any other user does not have any permission over the files and directories.",[11,8622,8623,8624,8626,8627,8629],{},"This setup allows Nginx or Apache (",[67,8625,8425],{},") to read and serve files reliably, maintains security by preventing unauthorized access, and allows you (",[67,8628,7732],{},") to create, edit, and delete files without worrying about messing up your website.",[11,8631,8632,8633,8636],{},"Now, let's look at how we can achieve this setup, ensuring new files and directories ",[52,8634,8635],{},"inherit"," the correct permissions automatically, so that next time you create a folder for a new site, you won't have to adjust anything manually!",[1232,8638,8640],{"id":8639},"step-1-assign-ownership","Step 1: Assign Ownership",[11,8642,8643,8644,8646,8647,8649,8650,8652],{},"First, let's assign ",[67,8645,7732],{}," as the owner and ",[67,8648,8425],{}," as the group for all files and directories inside ",[67,8651,8591],{},", recursively:",[59,8654,8656],{"className":6019,"code":8655,"language":6021,"meta":65,"style":65},"sudo chown -R nico:www-data /var/www\n",[67,8657,8658],{"__ignoreMap":65},[70,8659,8660,8663,8666,8668,8671],{"class":72,"line":73},[70,8661,8662],{"class":76},"sudo",[70,8664,8665],{"class":419}," chown",[70,8667,8295],{"class":1311},[70,8669,8670],{"class":419}," nico:www-data",[70,8672,8673],{"class":419}," /var/www\n",[11,8675,8676,8677,3803,8680,8683],{},"On some systems, the web server user might be different (e.g., ",[67,8678,8679],{},"www-html",[67,8681,8682],{},"apache","). If that's the case, simply adjust the command to reflect the correct user and group.",[1232,8685,8687],{"id":8686},"step-2-configure-permissions-for-existing-files-and-folders","Step 2: Configure Permissions For Existing Files and Folders",[11,8689,8690],{},"Next, define the permissions. Directories and files require distinct settings:",[59,8692,8694],{"className":6019,"code":8693,"language":6021,"meta":65,"style":65},"sudo find /var/www -type d -exec chmod 2750 {} \\;\nsudo find /var/www -type f -exec chmod 0640 {} \\;\n",[67,8695,8696,8727],{"__ignoreMap":65},[70,8697,8698,8700,8703,8706,8709,8712,8715,8718,8721,8724],{"class":72,"line":73},[70,8699,8662],{"class":76},[70,8701,8702],{"class":419}," find",[70,8704,8705],{"class":419}," /var/www",[70,8707,8708],{"class":1311}," -type",[70,8710,8711],{"class":419}," d",[70,8713,8714],{"class":1311}," -exec",[70,8716,8717],{"class":419}," chmod",[70,8719,8720],{"class":1311}," 2750",[70,8722,8723],{"class":419}," {}",[70,8725,8726],{"class":1311}," \\;\n",[70,8728,8729,8731,8733,8735,8737,8740,8742,8744,8747,8749],{"class":72,"line":160},[70,8730,8662],{"class":76},[70,8732,8702],{"class":419},[70,8734,8705],{"class":419},[70,8736,8708],{"class":1311},[70,8738,8739],{"class":419}," f",[70,8741,8714],{"class":1311},[70,8743,8717],{"class":419},[70,8745,8746],{"class":1311}," 0640",[70,8748,8723],{"class":419},[70,8750,8726],{"class":1311},[7575,8752,8754],{"id":8753},"directories-2750","Directories: 2750",[123,8756,8757,8763,8769],{},[126,8758,8759,8760,8762],{},"The owner ",[67,8761,7732],{}," can read, write, and execute.",[126,8764,8765,8766,8768],{},"Users in the ",[67,8767,8425],{}," group can read and execute.",[126,8770,8771],{},"Others have no permissions.",[11,8773,8774,8775,8777,8778,8780,8781,8783,8784,8787,8788,8790,8791,8794],{},"The leading ",[67,8776,4084],{}," (setgid bit) ensures new files and subdirectories inherit the ",[67,8779,8425],{}," group. For instance, if you're in ",[67,8782,8591],{}," and create a directory with ",[67,8785,8786],{},"mkdir my-site",", it will automatically belong to the ",[67,8789,8425],{}," group. Likewise, when you create a file with ",[67,8792,8793],{},"touch log.txt",", it will inherit the same group.",[7575,8796,8798],{"id":8797},"files-0640","Files: 0640",[123,8800,8801,8806,8811],{},[126,8802,8759,8803,8805],{},[67,8804,7732],{}," can read and write.",[126,8807,8765,8808,8810],{},[67,8809,8425],{}," group can only read.",[126,8812,8771],{},[11,8814,8815,8816,7615],{},"These are good defaults but won't allow you to execute files. If you need to execute a script, manually add the execute permission (e.g. using ",[67,8817,8818],{},"chmod +x my-file",[11,8820,8821,8822,8825,8826,8829],{},"If you want to allow any user to enter directories and read files, you can opt for ",[67,8823,8824],{},"2775"," for directories and ",[67,8827,8828],{},"0644"," for files.",[1232,8831,8833],{"id":8832},"step-3-use-umask-to-set-permissions-for-new-files-and-directories","Step 3: Use umask to Set Permissions for New Files and Directories",[11,8835,8836,8837,8839,8840,8843],{},"The setgid bit (indicated by the leading ",[67,8838,4084],{}," in ",[67,8841,8842],{},"2750",") ensures that new subdirectories and files inherit the parent directory's group, but it does not modify their permission bits.",[11,8845,8846,8847,8825,8850,8829],{},"In Linux, files and directories are initially created with default permissions—typically ",[67,8848,8849],{},"777",[67,8851,8852],{},"666",[11,8854,8855,8856,7202,8859,8861,8862,8865],{},"These permissions are quite permissive but are modified by a default value called ",[67,8857,8858],{},"umask",[52,8860,8858],{}," (user file creation mask) specifies ",[52,8863,8864],{},"which permissions to remove"," from these defaults when new files and directories are created.",[11,8867,8868,8869,8871,8872,8875,8876,8878,8879,8881],{},"By default, ",[67,8870,8858],{}," is set to ",[67,8873,8874],{},"022",". You can check it by running the command ",[67,8877,8858],{}," in your terminal. What does ",[67,8880,8874],{}," mean?",[123,8883,8884,8890,8899],{},[126,8885,8886,8887,8889],{},"The first digit (",[67,8888,3279],{},") has no effect.",[126,8891,8892,8893,8895,8896,1130],{},"The second digit (",[67,8894,4084],{},") removes write permission for the ",[52,8897,8898],{},"group",[126,8900,8901,8902,8904,8905,1130],{},"The third digit (",[67,8903,4084],{},") removes write permission for ",[52,8906,8907],{},"others",[11,8909,8910,8911,8913,8914,3029,8917,8920,8921,8923,8924,3029,8927,7615],{},"For new directories, it turns ",[67,8912,8849],{}," into ",[67,8915,8916],{},"755",[67,8918,8919],{},"rwxr-xr-x","). For new files, this default umask turns ",[67,8922,8852],{}," permissions into ",[67,8925,8926],{},"644",[67,8928,8929],{},"rw-r--r--",[11,8931,8932,8933,974,8936,8939],{},"If those are the permissions you configured in the previous section, then you're all set! But if you went for the more restrictive permissions that remove all permissions for other users (",[67,8934,8935],{},"750",[67,8937,8938],{},"640","), you will need to tweak the last digit of umask.",[11,8941,8942,8943,8945,8946,8948,8949,1130],{},"Which digit should we use? Well, if ",[67,8944,8329],{}," allows all permissions, then ",[67,8947,8329],{}," for umask means removing all those permissions. Remember, umask defines the permissions that won't be assigned by default. Therefore, we need to set the umask value to ",[67,8950,8951],{},"027",[123,8953,8954,8958,8963],{},[126,8955,8886,8956,8889],{},[67,8957,3279],{},[126,8959,8892,8960,8962],{},[67,8961,4084],{},") removes the write permission for the group.",[126,8964,8901,8965,8967],{},[67,8966,8329],{},") removes the read, write, and execute permissions for others.",[11,8969,8970,8971,3803,8974,1339],{},"Add the following line to your ",[67,8972,8973],{},"~/.bashrc",[67,8975,8976],{},"~/.zshrc",[59,8978,8980],{"className":6019,"code":8979,"language":6021,"meta":65,"style":65},"umask 027\n",[67,8981,8982],{"__ignoreMap":65},[70,8983,8984,8986],{"class":72,"line":73},[70,8985,8858],{"class":1307},[70,8987,8988],{"class":1311}," 027\n",[11,8990,8991],{},"Then, apply the change with:",[59,8993,8995],{"className":6019,"code":8994,"language":6021,"meta":65,"style":65},"source ~/.bashrc  # or source ~/.zshrc\n",[67,8996,8997],{"__ignoreMap":65},[70,8998,8999,9002,9005],{"class":72,"line":73},[70,9000,9001],{"class":1307},"source",[70,9003,9004],{"class":419}," ~/.bashrc",[70,9006,9007],{"class":1301},"  # or source ~/.zshrc\n",[1232,9009,9011],{"id":9010},"step-4-validate-the-configuration","Step 4: Validate the Configuration",[11,9013,9014],{},"Verify that everything is set correctly:",[59,9016,9018],{"className":6019,"code":9017,"language":6021,"meta":65,"style":65},"ls -l /var/www\n",[67,9019,9020],{"__ignoreMap":65},[70,9021,9022,9025,9028],{"class":72,"line":73},[70,9023,9024],{"class":76},"ls",[70,9026,9027],{"class":1311}," -l",[70,9029,8673],{"class":419},[11,9031,9032],{},"Expect to see:",[123,9034,9035,9050,9061],{},[126,9036,9037,954,9040,3029,9043,9045,9046,9049],{},[52,9038,9039],{},"Directories:",[67,9041,9042],{},"drwxr-s---",[67,9044,8842],{},"), with the ",[67,9047,9048],{},"s"," indicating setgid.",[126,9051,9052,954,9055,3029,9058,7615],{},[52,9053,9054],{},"Files:",[67,9056,9057],{},"-rw-r-----",[67,9059,9060],{},"0640",[126,9062,9063,954,9066,1130],{},[52,9064,9065],{},"Ownership:",[67,9067,9068],{},"nico:www-data",[11,9070,9071],{},"If discrepancies appear, reapply the ownership or permissions commands from earlier steps to correct them.",[1232,9073,8002],{"id":8001},[11,9075,9076],{},"Today, we've covered all the essentials—understanding permission strings, setting the right ownership for your files, and ensuring your web server can function securely without exposing vulnerabilities.",[11,9078,9079],{},"Server security isn't just a switch you flip; it takes attention and care. So don't skip this step! Take a few minutes to double-check your setup, make any necessary tweaks, and you'll sleep better knowing your server is secure.",[11,9081,2361],{},[1013,9083,9084],{},"html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html pre.shiki code .sYf5A, html code.shiki .sYf5A{--shiki-default:#66D9EF}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}",{"title":65,"searchDepth":160,"depth":160,"links":9086},[9087,9091],{"id":8067,"depth":160,"text":8068,"children":9088},[9089,9090],{"id":8229,"depth":167,"text":8230},{"id":8306,"depth":167,"text":8307},{"id":8538,"depth":160,"text":8539,"children":9092},[9093,9094,9095,9096,9097],{"id":8639,"depth":167,"text":8640},{"id":8686,"depth":167,"text":8687},{"id":8832,"depth":167,"text":8833},{"id":9010,"depth":167,"text":9011},{"id":8001,"depth":167,"text":8002},"2024-10-20","/img/blog/server-permissions.png",{},"/blog/a-step-by-step-guide-to-setting-up-permissions-on-your-linux-web-server",{"title":8049,"description":8054},"blog/a-step-by-step-guide-to-setting-up-permissions-on-your-linux-web-server","lasxkwH8QR4--kn_eCdH0AIcR6aJOSZ5xDFwFWaF-gw",1783966899411]